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


当前回答

我写了一个简单的代码片段来处理模式的刷新。 基本上,它将点击链接存储在模态的数据中,并检查它是否与已点击的链接相同,删除或不删除模态数据。

var handleModal = function()
{
    $('.triggeringLink').click(function(event) {
        var $logsModal = $('#logsModal');
        var $triggeringLink = $logsModal.data('triggeringLink');

        event.preventDefault();

        if ($logsModal.data('modal') != undefined
            && $triggeringLink != undefined
            && !$triggeringLink.is($(this))
        ) {
            $logsModal.removeData('modal');
        }

        $logsModal.data('triggeringLink', $(this));

        $logsModal.modal({ remote: $(this).attr('href') });
        $logsModal.modal('show');
    });
};

其他回答

@merv接受的答案的扩展版本。它还检查被隐藏的模态是否从远程源加载,并清除旧内容以防止它闪烁。

$(document).on('hidden.bs.modal', '.modal', function () {
  var modalData = $(this).data('bs.modal');

  // Destroy modal if has remote source – don't want to destroy modals with static content.
  if (modalData && modalData.options.remote) {
    // Destroy component. Next time new component is created and loads fresh content
    $(this).removeData('bs.modal');
    // Also clear loaded content, otherwise it would flash before new one is loaded.
    $(this).find(".modal-content").empty();
  }
});

https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5

对于Bootstrap 3.1,你会想要删除数据并清空模态内容,而不是整个对话框(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();
});

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

在Bootstrap 3.2.0中,“on”事件必须在文档上,你必须清空模式:

$(document).on("hidden.bs.modal", function (e) {
    $(e.target).removeData("bs.modal").find(".modal-content").empty();
});

在Bootstrap 3.1.0中,“on”事件可以在body上:

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

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

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