我正在使用 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.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 模式远程函数,因为它应该足够简单,我想我只是让事情变得复杂。
问题有两个方面。
First,一旦实例化 Modal 对象,它就会永久附加到由data-target
以及随后的调用以表明模态只会调用toggle()
上,但不会更新中的值options
。所以,尽管href
不同链接上的属性是不同的,当模式切换时,其值remote
没有得到更新。对于大多数选项,可以通过直接编辑对象来解决此问题。例如:
$('#myModal').data('bs.modal').options.remote = "http://website.example/item/7";
然而,这在这种情况下不起作用,因为......
Second,Modal插件旨在加载远程资源在构造函数中Modal 对象的,不幸的是,这意味着即使对options.remote
, 它永远不会被重新加载.
一个简单的补救措施是在后续切换之前销毁 Modal 对象。一种选择是在隐藏完成后将其销毁:
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
Note: Adjust the selectors as needed. This is the most general.
Plunker http://plnkr.co/edit/yMofRZ?p=preview
或者您可以尝试提出一种更复杂的方案来执行某些操作,例如检查启动模式的链接是否与前一个不同。如果是,则销毁;如果不是,则无需重新加载。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)