Javascript 如何在关闭时清除引导远程模式内容？

然而，我正在同一个域上启动一个包含远程内容的模式。模态可以在同一页面上以不同的内容打开多次，因此当它关闭时，我需要它清除.modal主体部分

我试着这样做：

function close_modal()

{

    $('.modal').modal('hide');

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


}

但由于某些原因，当我打开另一个模式目标时，前面的内容在一瞬间仍然可见。我还检查了源代码，以前加载的内容仍然存在。我该如何解决这个问题？这是我的标记：

$('a[rel=modal]').on('click', function(evt) {
    evt.preventDefault();
    var modal = $('#modal').modal();
    modal
        .find('.modal-body')
        .load($(this).attr('href'), function (responseText, textStatus) {
            if ( textStatus === 'success' || 
                 textStatus === 'notmodified') 
            {
                modal.show();
            }
    });
});

以及HTML：

<div id="modal" class="modal fade" 
     tabindex="-1" role="dialog" aria-labelledby="plan-info" aria-hidden="true">
    <div class="modal-dialog modal-full-screen">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" 
                  data-dismiss="modal" aria-hidden="true">
                  <span class="glyphicon glyphicon-remove-circle"></span>
                </button>
            </div>
            <div class="modal-body">
                <!-- /# content goes here -->
            </div>
        </div>
    </div>
</div>

---

您应该能够使用jQuery的empty方法从中删除所有子节点。模态体：

---

您应该能够使用jQuery的empty方法从中删除所有子节点。模态体：

---

一个问题是，直到你已经关闭它之后，你才开始倾听它的关闭。你有：

// Hide the modal
$('.modal').modal('hide');

// Start listening for the hide event, if the modal closes remove the data
$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});

---

取而代之的是移动隐藏侦听器，使其在隐藏事件之前运行（可能在函数外部），因为它只需要开始侦听一次，或者删除它，只需使用$'.modal'.removeData'bs.modal'

一个问题是，在你关闭它之前，你不会倾听它的关闭。你有：

// Hide the modal
$('.modal').modal('hide');

// Start listening for the hide event, if the modal closes remove the data
$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});

---

取而代之的是移动隐藏侦听器，使其在隐藏事件之前运行（可能在函数外部），因为它只需要开始侦听一次，或者删除它，只需使用$'.modal'.removeData'bs.modal'

假设你的模态没有做任何特殊的事情，你可能会发现使用类似的东西更容易，它会动态生成你的引导模态。您的代码看起来像：

$('a[rel=modal]').on('click', function(evt) {
    evt.preventDefault();

    var url = $(this).attr('href');

    $.get(url)
        .done(function (response, status, jqxhr) {
            // store a reference to the bootbox object
            var dialog = bootbox.dialog({
                message: response
            });
        })
        .fail(function(jqxhr, status, error){
            /* Do something when the form can't be loaded */
        });
});

---

假设你的模态没有做任何特殊的事情，你可能会发现使用类似的东西会更容易，它会动态地生成你的引导模态。您的代码看起来像：

$('a[rel=modal]').on('click', function(evt) {
    evt.preventDefault();

    var url = $(this).attr('href');

    $.get(url)
        .done(function (response, status, jqxhr) {
            // store a reference to the bootbox object
            var dialog = bootbox.dialog({
                message: response
            });
        })
        .fail(function(jqxhr, status, error){
            /* Do something when the form can't be loaded */
        });
});

---

---

您好，先生@user1996496您能提供一个JSFIDLE吗？如果您第三次打开它，前面的内容在一瞬间是否仍然可见？是的。查找jQuery的load函数。@是的，每次都会发生time@JeancarloFontalvo我试过了，但是jsfiddle显然不允许加载远程内容。嗨，先生@user1996496，你能提供一个jsfiddle吗？如果你第三次打开它，前面的内容在一瞬间是否仍然可见？是的。查找jQuery的load函数。@是的，每次都会发生time@JeancarloFontalvo我试过了，但JSFIDLE显然不允许加载远程内容。我认为这没有帮助，它本质上与$this.removeData'bs.modal'相同；对吗？@joshhunt我不相信真-移除数据和清空是完全不同的方法。removeData只删除数据属性，其中empty删除子节点。我可能错了，但我认为这是引导js接管的地方。这篇文章似乎是这么认为的，但我在文档中找不到关于它的任何信息：这难道不是只适用于使用远程属性，而不是当您手动调用时。加载。。。你自己设置内容吗？就在@user1996496上，很乐意帮忙：-我不认为这会有帮助，它本质上与$this.removeData'bs.modal'相同；对吗？@joshhunt我不相信真-移除数据和清空是完全不同的方法。removeData只删除数据属性，其中empty删除子节点。我可能错了，但我认为这是引导js接管的地方。这篇文章似乎是这么认为的，但我在文档中找不到关于它的任何信息：这难道不是只适用于使用远程属性，而不是当您手动调用时。加载。。。您可以自己设置内容吗？请点击@user1996496，很高兴为您提供帮助：-