jquery - Twitter Bootstrap 远程模式每次都显示相同的内容

Question

我正在使用 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 函数轻松使其工作，但我想知道是否可以使用 native Bootstrap 模态远程函数，因为它应该很简单，我想我只是把事情复杂化了。

Answer 1

问题是双重的。

首先，一旦一个 Modal 对象被实例化，它就会持久附加到 data-target 指定的元素上，随后的调用表明 modal 只会调用 toggle()，但不会更新 options 中的值。因此，即使不同链接上的 href 属性不同，当切换模式时，remote 的值也不会更新。对于大多数选项，可以通过直接编辑对象来解决这个问题。例如:

$('#myModal').data('bs.modal').options.remote = "http://website.example/item/7";

然而，这在这种情况下是行不通的，因为...

其次，Modal插件的设计目的是在Modal对象的构造函数中加载远程资源，不幸的是，这意味着即使对options.remote，永远不会重新加载。

一个简单的补救措施是在后续切换之前销毁 Modal 对象。一种选择是在它完成隐藏后将其销毁:

$('body').on('hidden.bs.modal', '.modal', function () {
  $(this).removeData('bs.modal');
});

_{注意:根据需要调整选择器。这是最通用的。}

Plunker

或者你可以尝试想出一个更复杂的方案来做一些事情，比如检查启动模态的链接是否与之前的不同。如果是，则销毁；如果不是，则无需重新加载。