Twitter引导远程模式每次显示相同的内容
我正在使用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.com/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.com/item/1" data-target="#modal-item" data-toggle="modal">Edit 1</a> <a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal">Edit 2</a> <a href="http://www.website.com/item/3" data-target="#modal-item" data-toggle="modal">Edit 2</a>
当我第一次点击这些链接时，我看到了正确的内容，但是当我点击其他链接时，它显示了第一次加载的内容，它不更新内容。
我希望每次点击都能更新。
PS：我可以很容易地通过自定义的jQuery函数来工作，但是我想知道是否可以使用本地Bootstrap模式远程函数，因为它应该很容易，我想我只是复杂的东西。
问题是双重的。
首先 ，一旦Modal对象被实例化，它将被持久地附加到由data-target和后续调用指定的元素上，以显示模态只会调用toggle() ，但不会更新options的值。 所以，即使你的不同链接上的href属性不同，当模式被切换时， remote的值也不会被更新。 对于大多数选项，可以通过直接编辑对象来解决这个问题。 例如：
$('#myModal').data('bs.modal').options.remote = "http://website.com/item/7";
但是，在这种情况下，这是行不通的，因为…
其次 ，Modal插件被设计为在Modal对象的构造函数中加载远程资源，这意味着即使对options.remote进行了更改， 它也不会被重新加载 。
一个简单的补救措施是在后续切换之前破坏模态对象。 一种选择是在完成隐藏后将其销毁：
$('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });
注意：根据需要调整选择器。 这是最一般的。
Plunker
或者你可以尝试一个更复杂的方案来做一些事情，例如检查启动模式的链接是否与以前不同。 如果是，摧毁; 如果不是，则不需要重新加载。
对于bootstrap 3，你应该使用：
$('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });
对于Bootstrap 3.1，您需要删除数据并清空modal-content而不是整个对话框（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(); });
谢谢merv。 我开始修补boostrap.js，但你的答案是一个快速和干净的解决方法。 这是我最终在我的代码中使用的。
$('#modal-item').on('hidden', function() { $(this).removeData('modal'); });
接受的答案不适合我，所以我用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 FYI
$('#myModal').on('hidden.bs.modal', function () { $(this).removeData('bs.modal'); });
我的项目是在Yii中构建的，并使用Bootstrap-Yii插件，所以这个答案只有在使用Yii时才有意义。
上述修复程序确实有效，但是仅在第一次显示模式之后。 第一次空了。 我认为这是因为我的代码启动后，Yii调用了模态的隐藏函数，从而清除了我的启动变量。
我发现，在启动模式的代码之前立即调用removeData函数，这是个诀窍。 所以我的代码是这样构造的…
$ ("#myModal").removeData ('modal'); $ ('#myModal').modal ({remote : 'path_to_remote'});
在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').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });
为什么不使用BS 3更一般？ 只要使用“[something] modal”作为模态DIV的ID。
$("div[id$='modal']").on('hidden.bs.modal', function () { $(this).removeData('bs.modal'); } );
对我来说只有工作选择是：
$('body').on('hidden.bs.modal', '#modalBox', function () { $(this).remove(); });
我使用Bootstrap 3，并且我有一个名为popup('popup content')的函数，它附加模态框html。
添加一个$（this）.html（''）; 清除可见的数据，它工作得很好
如果提供了远程URL，内容将通过jQuery的加载方法加载一次，并注入.modal-content div。 如果您正在使用data-api，则可以使用href属性来指定远程源。 下面显示了一个例子
$.ajaxSetup ({ // Disable caching of AJAX responses cache: false });
我添加了类似这样的内容，因为旧内容会显示，直到新内容出现，.modal内容中的.html（''）将清除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'); }); };
对于Bootstrap 3，在modal.js中我改变了：
$(document) .on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') }) .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open'); })
至
$(document) .on('show.bs.modal', '.modal', function () { $(document.body).addClass('modal-open') }) .on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal').empty() $(document.body).removeClass('modal-open') })
（为了清晰起见，增加了额外的空间
这可以通过调用模态容器上的empty（）以及删除数据来防止旧模式内容的任何不必要的闪烁。
$('#myModal').on('hidden.bs.modal', function () { $(this).removeData('modal'); });
这个为我工作。
这种方法适用于我：
$("#myModal").on("show.bs.modal", function(e) { var link = $(e.relatedTarget); $(this).find(".modal-body").load(link.attr("href")); });
$('body').on('hidden.bs.modal', '.modal', function () { $("#mention Id here what you showed inside modal body").empty() });
你想要清空哪个html元素（div，span）。
这个为我工作：
语气
<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">×</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>
链接区域是我放置数据并需要清除的区域
@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.3.2
$('#myModal').on('hide.bs.modal', function() { $(this).removeData(); });
祝你好运：
$('#myModal').on('hidden.bs.modal', function () { location.reload(); });
