我正在使用Twitter bootstrap,我指定了一个模式
<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.com/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.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a>
<a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a>
<a href="http://www.website.com/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>
当我第一次点击这些链接中的任何一个时,我会看到正确的内容,但当我点击其他链接时,它会显示第一次加载的相同内容,它不会更新内容。
我希望它被更新的每一次点击。
附言:我可以通过自定义jQuery函数轻松地让它工作,但我想知道是否可以使用本地引导模式远程函数,因为它应该足够简单,我猜我只是把事情复杂化了。
发布于 2013-08-09 03:04:58
对于bootstrap 3,您应该使用:
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
发布于 2014-02-27 03:42:43
对于Bootstrap3.1,您需要删除数据并清空modal-content
,而不是整个对话框(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();
});
发布于 2012-09-20 09:28:46
谢谢你,梅夫。我开始修补boostrap.js,但你的答案是一个快速干净的变通方法。以下是我最终在代码中使用的内容。
$('#modal-item').on('hidden', function() {
$(this).removeData('modal');
});
https://stackoverflow.com/questions/12286332
复制相似问题