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


当前回答

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

其他回答

我的项目是在Yii中构建的,使用Bootstrap-Yii插件,所以这个答案只在你使用Yii时才相关。

上面的修复工作,但只有在模态第一次显示之后。第一次一无所获。我认为这是因为在我启动代码后,Yii调用了模态的隐藏函数,从而清除了我的启动变量。

我发现在启动模态的代码之前立即调用removeData可以达到目的。所以我的代码是这样结构的…

$ ("#myModal").removeData ('modal');
$ ('#myModal').modal ({remote : 'path_to_remote'});

接受的答案不适合我,所以我使用JavaScript来完成它。

<a href="/foo" class="modal-link">
<a href="/bar" class="modal-link">

<script>
$(function() {
    $(".modal-link").click(function(event) {
        event.preventDefault()
        $('#myModal').removeData("modal")
        $('#myModal').modal({remote: $(this).attr("href")})
    })
})

在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');
});
        $('#myModal').on('hidden.bs.modal', function () {
            $(this).removeData('modal');
        });

这个适合我。

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

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