Jquery 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>

x
更新项目
正在加载内容。。。
更新项目

以及链接

<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>

当我第一次单击其中任何一个链接时，我会看到正确的内容，但当我单击其他链接时，它会显示第一次加载的相同内容，而不会更新内容

我希望每次点击时都能更新它

---

附言：我可以通过自定义jQuery函数轻松实现，但我想知道是否可以使用本机引导模式远程功能，因为它应该足够简单，我想我只是让事情变得复杂。

问题有两个方面

首先，一旦模态对象被实例化，它将被持久地附加到由

数据目标

指定的元素上，随后的调用显示模态将仅对其调用

toggle（）

，但不会更新

选项

中的值。因此，即使不同链接上的

href

属性不同，当切换模式时，

remote

的值也不会更新。对于大多数选项，可以通过直接编辑对象来解决此问题。例如：

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

然而，这在这种情况下是行不通的，因为。。。 第二个，模式插件设计用于在模式对象的构造函数中加载远程资源，不幸的是，这意味着即使更改了

选项.remote

，也永远不会重新加载

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

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

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

---

或者你可以尝试提出一个更复杂的方案，比如检查启动模态的链接是否与前一个不同。如果是，销毁；如果没有，则无需重新加载。

谢谢merv。我开始修补boostrap.js，但您的答案是快速而干净的解决方法。下面是我最后在代码中使用的内容

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

---

我的项目是在Yii中构建的&使用Bootstrap Yii插件，所以这个答案只有在您使用Yii时才相关

上述修复确实有效，但仅在第一次显示模式之后。第一次是空的。我想这是因为在我初始化代码之后，Yii调用了modal的hide函数，从而清除了初始化变量

我发现，将removeData调用放在启动modal的代码之前就可以做到这一点。所以我的代码的结构是这样的

$ ("#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")})
    })
})

$（函数（）{
$（“.modal link”）。单击（函数（事件）{
event.preventDefault（）
$（“#myModal”）.removeData（“modal”）
$（'#myModal'）.modal（{remote:$（this.attr（“href”）}）
})
})

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

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

---

对于引导3，您应该使用：

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

---

这适用于Bootstrap 3供参考

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

---

为什么不让BS3更通用？只需使用“[something]modal”作为modal DIV的ID

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

---

添加$（this.html（“”）；为了同样清除可见数据，并且对于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'); })

到

（为清晰起见，增加了额外的间距）

---

这可以通过调用模态容器上的empty（）以及删除数据来防止旧模态内容的任何不必要的闪烁

对于Bootstrap 3.1，您需要删除数据并清空

模式内容，而不是整个对话框（3.0），以避免在等待加载远程内容时出现闪烁

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

如果您使用的是非远程模态，那么上述代码当然会在关闭后删除它们的内容（错误）。您可能需要向这些模态中添加一些内容（比如
.localmodal
类），这样它们就不会受到影响。然后将上述代码修改为：

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

如果提供了远程URL，则内容将通过jQuery的load方法加载一次，并注入.modal content div。如果您使用的是数据api，也可以使用href属性指定远程源。下面是一个例子

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

这一个对我有用。
在Bootstrap 3.2.0中，“开启”事件必须出现在文档上，并且您必须清空模式：

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

在Bootstrap 3.1.0中，“开启”事件可以在主体上：

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

在引导版本3.3.2上测试

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

另一种方法对我很有效：

$("#myModal").on("show.bs.modal", function(e) {
    var link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
});

您想清空哪个html元素（div，span Which）。
我唯一的选择是：

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

我使用bootstrap3，我有一个函数叫做
popup（'popup content'）
它附加了模式框html
 我添加了类似的内容，因为旧内容会一直显示，直到新内容出现为止。modal内容中包含.html（“”）。modal内容会清除其中的html，希望有帮助

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

这个对我很有用：

模态


&时代；
卡里卡里亚万

剧本

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

$（'body'）.on（'hidden.bs.modal'，'.modal'，function（）{$（“.links area”）.empty（）}）；

链接区是我放置数据的区域，需要清除此链接祝您好运：

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

@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();
  }
});

@VladimirStarkov对此表示抱歉-似乎我忘记了模态上的
隐藏
类，因此如果您的窗口太小，模态可能阻止了按钮上的鼠标事件。由于某种原因，JSFiddle.net在这个m中非常糟糕
<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>

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

$(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();
  }
});