我正在使用 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.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>
当我第一次单击这些链接中的任何一个时,我会看到正确的内容,但是当我单击其他链接时,它会显示第一次加载的相同内容,它不会更新内容。
我希望它每次点击时都会更新。
PS:我可以通过自定义 jQuery 函数轻松地使其工作,但我想知道它是否可以使用本机 Bootstrap 模态远程函数,因为它应该很容易,我想我只是让事情复杂化。
问题有两个方面。
首先 ,一旦一个 Modal 对象被实例化,它就会持久地附加到由指定的元素data-target和随后的调用中,以表明 modal 只会调用toggle()它,但不会更新options. 因此,即使href不同链接上的属性不同,当切换模式时,值remote也不会更新。对于大多数选项,可以通过直接编辑对象来解决这个问题。例如:
data-target
toggle()
options
href
remote
$('#myModal').data('bs.modal').options.remote = "http://website.com/item/7";
其次,Modal 插件被设计为在 Modal 对象 的构造函数 中加载远程资源,不幸的是,这意味着即使更改了options.remote, 也永远不会重新加载 。
options.remote
一个简单的补救措施是在后续切换之前销毁 Modal 对象。一种选择是在它完成隐藏后将其销毁:
$('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });
注意: 根据需要调整选择器。这是最一般的。
或者你可以尝试想出一个更复杂的方案来做一些事情,比如检查启动模式的链接是否与前一个不同。如果是,则销毁;如果不是,则无需重新加载。