我正在使用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模态远程函数,因为它应该足够简单,我猜我只是复杂的事情。


当前回答

谢谢莫夫。我开始修补boostrap.js,但你的答案是一个快速和干净的解决方案。下面是我最终在代码中使用的代码。

$('#modal-item').on('hidden', function() {
    $(this).removeData('modal');
});

其他回答

这个问题是双重的。

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

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

然而,在这种情况下,这行不通,因为……

其次,Modal插件被设计为在Modal对象的构造函数中加载远程资源,不幸的是,这意味着即使对选项进行了更改。遥控器,它永远不会被重新加载。

一个简单的补救方法是在后续切换之前销毁Modal对象。一种选择是在它隐藏完毕后销毁它:

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

注意:根据需要调整选择器。这是最普遍的。

砰砰作响

或者你可以尝试想出一个更复杂的方案来做一些事情,比如检查启动模态的链接是否与前一个不同。若是,就毁灭;如果不是,那么就不需要重新加载。

祝你好运:

$('#myModal').on('hidden.bs.modal', function () {
    location.reload();
});

如果提供了远程URL,内容将通过jQuery的load方法加载一次,并注入到.modal-content div中。如果你使用data-api,你也可以使用href属性指定远程源。下面是一个示例

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

为什么不让它在bsm3中更通用呢?只需使用“[something]modal”作为模式DIV的ID。

$("div[id$='modal']").on('hidden.bs.modal',
    function () {
        $(this).removeData('bs.modal');
    }
);

添加$(this).html(");也可以清除可见数据,效果很好