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


当前回答

我已经添加了这样的东西,因为旧的内容显示直到新的出现,与.html(")在.modal-content将清除HTML里面,希望它有帮助

$('#myModal').on('hidden.bs.modal', function () {
   $('#myModal').removeData('bs.modal');
   $('#myModal').find('.modal-content').html('');
});

其他回答

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

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');
    });
};

这个对我很有用:

资本

<div class="modal fade" id="searchKaryawan" tabindex="-1" role="dialog" aria-labelledby="SearchKaryawanLabel" aria-hidden="true"> <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="SearchKaryawanLabel">Cari Karyawan</h4>
  </div>
  <div class="modal-body">
    <input type="hidden" name="location">
    <input name="cariNama" type="text" class="form-control" onkeyup="if (this.value.length > 3) cariNikNama();" />
    <div class="links-area" id="links-area"></div>
  </div>
  <div class="modal-footer">
  </div>
</div> </div></div>

脚本

<script type="text/javascript">$('body').on('hidden.bs.modal', '.modal', function () {  $(".links-area").empty() }); </script>

链接区域是我放置数据和需要清除的区域

这适用于Bootstrap 3供参考

$('#myModal').on('hidden.bs.modal', function () {
  $(this).removeData('bs.modal');
});
$('body').on('hidden.bs.modal', '.modal', function () {
       $("#mention Id here what you showed inside modal body").empty()
});

你想清空哪个html元素,比如(div,span等等)。

在Bootstrap 3.3.2版本上测试

  $('#myModal').on('hide.bs.modal', function() {
    $(this).removeData();
  });