我正在使用Twitter引导,我已经指定了一个模式
<div class="modal hide" id="modal-item">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Update Item</h3>
</div>
<form action="http://www.website.example/update" method="POST" class="form-horizontal">
<div class="modal-body">
Loading content...
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<button class="btn btn-primary" type="submit">Update Item</button>
</div>
</form>
</div>
还有链接
<a href="http://www.website.example/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="http://www.website.example/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="http://www.website.example/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>
当我第一次点击这些链接时,我看到的是正确的内容,但当我点击其他链接时,它会显示第一次加载的相同内容,它不会更新内容。
我希望它在每次点击时都能更新。
p.s.:我可以很容易地使它通过自定义jQuery函数工作,但我想知道它是否可能与本地Bootstrap模态远程函数,因为它应该足够简单,我猜我只是复杂的事情。
@merv接受的答案的扩展版本。它还检查被隐藏的模态是否从远程源加载,并清除旧内容以防止它闪烁。
$(document).on('hidden.bs.modal', '.modal', function () {
var modalData = $(this).data('bs.modal');
// Destroy modal if has remote source – don't want to destroy modals with static content.
if (modalData && modalData.options.remote) {
// Destroy component. Next time new component is created and loads fresh content
$(this).removeData('bs.modal');
// Also clear loaded content, otherwise it would flash before new one is loaded.
$(this).find(".modal-content").empty();
}
});
https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5
对于Bootstrap 3.1,你会想要删除数据并清空模态内容,而不是整个对话框(3.0),以避免在等待远程内容加载时闪烁。
$(document).on("hidden.bs.modal", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});
如果你使用的是非远程模态,那么上面的代码当然会在关闭后删除它们的内容(不好)。你可能需要在这些情态动词中添加一些东西(比如.local-modal类),这样它们就不会受到影响。然后将上述代码修改为:
$(document).on("hidden.bs.modal", ".modal:not(.local-modal)", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});
在Bootstrap 3.2.0中,“on”事件必须在文档上,你必须清空模式:
$(document).on("hidden.bs.modal", function (e) {
$(e.target).removeData("bs.modal").find(".modal-content").empty();
});
在Bootstrap 3.1.0中,“on”事件可以在body上:
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});