我正在使用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，在modal.js中我更改了:
$(document)
.on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open'); })
to
$(document)
.on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') })
.on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal').empty()
$(document.body).removeClass('modal-open')
})
(为清晰起见，增加了额外的间距)
这可以通过在模态容器上调用empty()并删除数据来防止任何不必要的旧模态内容的闪现。
@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
