Question

我正在使用动态生成的链接列表来显示带有ajax加载内容的模态窗口。 Bootstrap会自动缓存内容，但不会在模态隐藏事件中清除它。

每次点击链接时我都需要获取新内容，我该如何解决这个问题？我检查过，没有方法或属性可以将缓存设置为false。

Answer 1

您可以使用以下内容：

        <a href="/my/url" class="modal-toggle">test</a>


        $('body').on('click', '.modal-toggle', function (event) {
            event.preventDefault();
            $('.modal-content').empty();
            $('#myModal')
                .removeData('bs.modal')
                .modal({remote: $(this).attr('href') });
        });

Answer 2

这对我有用..

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

Answer 3

此外，我发现以上内容不适用于HTML5视频标签。

如果您正在处理HTML5视频，则即使您更改了<source>标签，所显示的第一个视频也会一直显示。在这种情况下，removeData提示将不起作用。因此，要解决该问题，请重新创建整个视频元素，然后它将起作用。我在Chrome 70.0.3538.110中遇到了此问题，因此在其他浏览器中可能不是问题。

示例：

        var playerHtml = '<video id="someId" style="width: 100%;" controls>' +
            '<source src="' + someVideoUrl + '">' +
            '<p>Your browser does not support HTML5 video.</p>' +
            '</video>';

        $("#idOfDivWhereHtml5VideoElementShouldRender").html(playerHtml);

我希望可以帮助其他人解决HTML5视频问题：）

Answer 4

对于其他有类似问题的人，对我有用的解决方案是：

$.ajaxSetup({
    cache: false
})

从引导模式中删除内容缓存

4 个答案: