blocks|key|267056|text|谢谢你，梅夫。我开始修补boostrap.js，但你的答案是一个快速干净的变通方法。以下是我最终在代码中使用的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|267057|$('#modal-item').on('hidden',+function()+{
++++$(this).removeData('modal');
});|code-block|syntax|javascript|267058|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Thanks merv. I started tinkering around boostrap.js but your answer is a quick and clean workaround. Here's what I ended up using in my code.</p>

<pre><code>$('#modal-item').on('hidden', function() {
    $(this).removeData('modal');
});
</code></pre>


blocks|key|484059|text|我的项目是用Yii构建的，使用的是Bootstrap-Yii插件，所以这个答案只有在你使用Yii的时候才有意义。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|484060|上面的修复确实起作用了，但只是在第一次显示模式之后。第一次一无所获。我想这是因为在我初始化代码之后，Yii调用了模态的hide函数，从而清除了我的初始化变量。|484061|我发现将removeData调用放在启动模式的代码之前是可行的。所以我的代码结构是这样的…|484062|$+("#myModal").removeData+('modal');
$+('#myModal').modal+({remote+:+'path_to_remote'});|code-block|syntax|javascript|484063|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>My project is built in Yii &amp; uses the Bootstrap-Yii plugin, so this answer is only relevant if you're using Yii.</p>

<p>The above fix did work but only after the first time the modal was shown. The first time it came up empty. I think that's because after my initiation of the code Yii calls the hide function of the modal thereby clearing out my initiation variables. </p>

<p>I found that putting the removeData call immediately before the code that launched the modal did the trick. So my code is structured like this...</p>

<pre><code>$ ("#myModal").removeData ('modal');
$ ('#myModal').modal ({remote : 'path_to_remote'});
</code></pre>


blocks|key|267159|text|被接受的答案对我不起作用，所以我选择了JavaScript。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|267160|<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")})
++++})
})|code-block|syntax|javascript|267161|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The accepted answer didn't work for me, so I went with JavaScript to do it.</p>

<pre><code>&lt;a href="/foo" class="modal-link"&gt;
&lt;a href="/bar" class="modal-link"&gt;

&lt;script&gt;
$(function() {
    $(".modal-link").click(function(event) {
        event.preventDefault()
        $('#myModal').removeData("modal")
        $('#myModal').modal({remote: $(this).attr("href")})
    })
})
</code></pre>


blocks|key|484222|text|我写了一个处理模式刷新的简单代码片段。基本上，它将点击的链接存储在模式的数据中，并检查它是否与被点击的链接相同，是否删除了模式数据。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|484223|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');
++++});
};|code-block|syntax|javascript|484224|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I wrote a simple snippet handling the refreshing of the modal.
Basically it stores the clicked link in the modal's data and check if it's the same link that has been clicked, removing or not the modal data.</p>

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

        event.preventDefault();

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

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

        $logsModal.modal({ remote: $(this).attr('href') });
        $logsModal.modal('show');
    });
};
</code></pre>


blocks|key|484251|text|对于bootstrap+3，您应该使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|484252|$('body').on('hidden.bs.modal',+'.modal',+function+()+{
++++$(this).removeData('bs.modal');
});|code-block|syntax|javascript|484253|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>For bootstrap 3 you should use:</p>

<pre><code>$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});
</code></pre>


blocks|key|267375|text|这适用于Bootstrap+3+FYI|type|unstyled|depth|inlineStyleRanges|entityRanges|data|267376|$('#myModal').on('hidden.bs.modal',+function+()+{
++$(this).removeData('bs.modal');
});|code-block|syntax|javascript|267377|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This works with Bootstrap 3 FYI</p>

<pre><code>$('#myModal').on('hidden.bs.modal', function () {
  $(this).removeData('bs.modal');
});
</code></pre>


blocks|key|484323|text|为什么不在BS3中让它更通用呢？只需使用“某物模态”作为模态DIV的ID即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|484324|$("div[id$='modal']").on('hidden.bs.modal',
++++function+()+{
++++++++$(this).removeData('bs.modal');
++++}
);|code-block|syntax|javascript|484325|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Why not make it more general with BS 3? Just use "[something]modal" as the ID of the modal DIV.</p>

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


blocks|key|484360|text|添加了一个$(this).html('')；来清除可见的数据，效果非常好|type|unstyled|depth|inlineStyleRanges|entityRanges|data|484361|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Adding an $(this).html(''); to clear visible data as well, and it works pretty fine</p>


blocks|key|267500|text|对于Bootstrap+3，在modal.js中我更改了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|267501|$(document)
++.on('show.bs.modal',++'.modal',+function+()+{+$(document.body).addClass('modal-open')+})
++.on('hidden.bs.modal',+'.modal',+function+()+{+$(document.body).removeClass('modal-open');+})|code-block|syntax|javascript|267502|至|267503|$(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')
++})|267504|(为清楚起见，添加了额外的间距)|267505|这可以通过在模式容器上调用empty()并删除数据来防止任何不必要的旧模式内容的闪现。|267506|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>For Bootstrap 3, in modal.js I changed:</p>

<pre><code>$(document)
  .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
  .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open'); })
</code></pre>

<p>to</p>

<pre><code>$(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')
  })
</code></pre>

<p>(extra spacing added for clarity)</p>

<p>This prevents any unwanted flash of old modal content by calling empty() on the modal container as well as removing the data. </p>


blocks|key|267542|text|对于Bootstrap3.1，您需要删除数据并清空modal-content，而不是整个对话框(3.0)，以避免在等待远程内容加载时出现闪烁。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|267543|$(document).on("hidden.bs.modal",+function+(e)+{
++++$(e.target).removeData("bs.modal").find(".modal-content").empty();
});|code-block|syntax|javascript|267544|如果你使用的是非远程通道，那么上述代码当然会在关闭后删除它们的内容(不好)。您可能需要向这些模态函数添加一些东西(比如.local-modal类)，这样它们就不会受到影响。然后将上面的代码修改为：|267545|$(document).on("hidden.bs.modal",+".modal:not(.local-modal)",+function+(e)+{
++++$(e.target).removeData("bs.modal").find(".modal-content").empty();
});|267546|entityMap^0|P|D|0|0|1N|C|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p>For Bootstrap 3.1 you'll want to remove data and empty the <code>modal-content</code> rather than the whole dialog (3.0) to avoid the flicker while waiting for remote content to load.</p>

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

<p>If you are using non-remote modals then the above code will, of course, remove their content once closed (bad). You may need to add something to those modals (like a <code>.local-modal</code> class) so they aren't affected. Then modify the above code to:</p>

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


blocks|key|484755|text|++++++++$('#myModal').on('hidden.bs.modal',+function+()+{
++++++++++++$(this).removeData('modal');
++++++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|484756|这个很适合我。|unstyled|484757|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>        $('#myModal').on('hidden.bs.modal', function () {
            $(this).removeData('modal');
        });
</code></pre>

<p>This one works for me.</p>


blocks|key|484791|text|在Bootstrap+3.2.0中，"+on“事件必须在文档上，并且您必须清空模式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|484792|$(document).on("hidden.bs.modal",+function+(e)+{
++++$(e.target).removeData("bs.modal").find(".modal-content").empty();
});|code-block|syntax|javascript|484793|在Bootstrap+3.1.0中，"+on“事件可以在body上：|484794|$('body').on('hidden.bs.modal',+'.modal',+function+()+{
++++$(this).removeData('bs.modal');
});|484795|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>In Bootstrap 3.2.0 the "on" event has to be on the document and you have to empty the modal :</p>

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

<p>In Bootstrap 3.1.0 the "on" event can be on the body :</p>

<pre><code>$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});
</code></pre>


blocks|key|484869|text|在Bootstrap版本3.3.2上测试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|484870|++$('#myModal').on('hide.bs.modal',+function()+{
++++$(this).removeData();
++});|code-block|syntax|javascript|484871|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Tested on Bootstrap version 3.3.2</p>

<pre><code>  $('#myModal').on('hide.bs.modal', function() {
    $(this).removeData();
  });
</code></pre>


blocks|key|484902|text|另一种方法对我来说效果很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|484903|$("#myModal").on("show.bs.modal",+function(e)+{
++++var+link+=+$(e.relatedTarget);
++++$(this).find(".modal-body").load(link.attr("href"));
});|code-block|syntax|javascript|484904|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This other approach works well for me:</p>

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


blocks|key|267791|text|$('body').on('hidden.bs.modal',+'.modal',+function+()+{
+++++++$("#mention+Id+here+what+you+showed+inside+modal+body").empty()
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|267792|您要清空的html元素，如(div、span等)。|unstyled|267793|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$('body').on('hidden.bs.modal', '.modal', function () {
       $("#mention Id here what you showed inside modal body").empty()
});
</code></pre>

<p>Which html element you want to empty like(div,span whatever).</p>


blocks|key|267877|text|对我来说，唯一可行的选择是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|267878|$('body').on('hidden.bs.modal',+'#modalBox',+function+()+{
++++$(this).remove();
});|code-block|syntax|javascript|267879|我使用Bootstrap3，我有一个名为popup('popup+content')的函数，它附加了模式框html。|offset|length|style|CODE|267880|entityMap^0|0|0|K|M|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Only working option for me is: </p>

<pre><code>$('body').on('hidden.bs.modal', '#modalBox', function () {
    $(this).remove();
});
</code></pre>

<p>I use Bootstrap 3 and I have a function called
<code>popup('popup content')</code>
which appends the modal box html. </p>


blocks|key|267923|text|我添加了一些类似这样的东西，因为旧的内容会一直显示，直到新的内容出现，.mode-+content中的.html('')会清除里面的HTML，希望这会有所帮助|type|unstyled|depth|inlineStyleRanges|entityRanges|data|267924|$('#myModal').on('hidden.bs.modal',+function+()+{
+++$('#myModal').removeData('bs.modal');
+++$('#myModal').find('.modal-content').html('');
});|code-block|syntax|javascript|267925|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I've added something like this, because the older content is shown until the new one appears, with .html('') inside the .modal-content will clear the HTML inside, hope it helps</p>

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


blocks|key|485166|text|这一条对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485167|模式|485168|<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>|code-block|syntax|javascript|485169|脚本|485170|<script+type="text/javascript">$('body').on('hidden.bs.modal',+'.modal',+function+()+{++$(".links-area").empty()+});+</script>|485171|links-area是我放置数据并需要清除的区域|485172|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>This one works for me:</p>

<p>modal</p>

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

<p>script</p>

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

<p>links-area is area where i put the data and need to clear</p>


blocks|key|268016|text|祝你好运：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|268017|$('#myModal').on('hidden.bs.modal',+function+()+{
++++location.reload();
});|code-block|syntax|javascript|268018|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Good luck with this one:</p>

<pre><code>$('#myModal').on('hidden.bs.modal', function () {
    location.reload();
});
</code></pre>


blocks|key|485272|text|@merv接受答案的扩展版本。它还检查是否从远程源加载了隐藏的模式，并清除旧内容以防止其闪烁。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|485273|$(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();
++}
});|code-block|syntax|javascript|485274|https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5|offset|length|485275|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|21|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

<p>Expanded version of accepted answer by @merv. It also checks if modal being hidden is loaded from remote source and clears old content to prevent it from flashing.</p>

<pre><code>$(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 &amp;&amp; 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();
  }
});
</code></pre>

<p><a href="https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5" rel="nofollow">https://gist.github.com/WojtekKruszewski/ae86d7fb59879715ae1e6dd623f743c5</a></p>


<p>I am using Twitter bootstrap, I have specified a modal</p>

<pre><code>&lt;div class="modal hide" id="modal-item"&gt;

    &lt;div class="modal-header"&gt;
        &lt;button type="button" class="close" data-dismiss="modal"&gt;x&lt;/button&gt;
        &lt;h3&gt;Update Item&lt;/h3&gt;
    &lt;/div&gt;

    &lt;form action="http://www.website.com/update" method="POST" class="form-horizontal"&gt;

    &lt;div class="modal-body"&gt;
        Loading content...
    &lt;/div&gt;

    &lt;div class="modal-footer"&gt;
        &lt;a href="#" class="btn" data-dismiss="modal"&gt;Close&lt;/a&gt;
        &lt;button class="btn btn-primary" type="submit"&gt;Update Item&lt;/button&gt;
    &lt;/div&gt;

    &lt;/form&gt;

&lt;/div&gt;
</code></pre>

<p>And the links </p>

<pre><code>&lt;a href="http://www.website.com/item/1" data-target="#modal-item" data-toggle="modal"&gt;Edit 1&lt;/a&gt;
&lt;a href="http://www.website.com/item/2" data-target="#modal-item" data-toggle="modal"&gt;Edit 2&lt;/a&gt;
&lt;a href="http://www.website.com/item/3" data-target="#modal-item" data-toggle="modal"&gt;Edit 2&lt;/a&gt;
</code></pre>

<p>When I click on any of these link for the first time, I see the correct content, but when I click on other links it shows the same content loaded for the first time, it doesn't update the content.</p>

<p>I want it to be updated every time its clicked.</p>

<p>P.S : I can easily make it work via custom jQuery function, but I want to know if it's possible with native Bootstrap modal remote function, as it should be easy enough and I guess I am just complicating things.</p>


Twitter bootstrap remote modal shows same content every time

容器

jQuery

我正在使用Twitter bootstrap，我指定了一个模式<div class="modal hide" id="modal-item">    <div class="modal-header">        <button type="button" class="close" data-dismiss="m...

问Twitter bootstrap远程模式每次显示相同的内容
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Twitter bootstrap远程模式每次显示相同的内容EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Twitter bootstrap远程模式每次显示相同的内容
EN