模态加载两次

Question

我有一个问题，可以加载来自Ajax的外部URL的模态内容。所有工作正常，除了我的模态显示两次，模态首次为空，我看到Ajax调用的加载程序GIF。之后，将模态重载带有良好的信息。

在我看来，我只有一个模态元素：

<div id="TheModal" class="modal fade text-center">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>

以及在外部JavaScript文件中，我这样做是为了清除模式的先前数据，并加载新数据：

$(document).on('click', '.ls-modal', function(e)
{
    e.preventDefault();
    $('.modal-content').html('test');
    $(this).removeData('bs.modal');
    $('#TheModal').find('.modal-content').load($(this).attr('href'));
});

请注意，在我的模态的第一个负载（我想删除）中，在内容中，我可以看到" test"一词...

有人有一个主意？

谢谢你，对不起，我的英语不好！

Answer 1

您必须使用.off()

删除单个处理程序

尝试此代码，

$(document).off('click', '.ls-modal');
$(document).on('click', '.ls-modal', function (e)
{
    e.preventDefault();
    $('.modal-content').html('test');
    $('#TheModal .modal-content').html('');
    $('#TheModal').find('.modal-content').load($(this).attr('href'));
});

---

参考：

• .off（）
• .on

Answer 2

如果您正在加载包含加载模态操作的自定义JavaScript文件，请确保您仅加载该JavaScript文件一次。

我在ASP.NET MVC中使用部分视图时遇到了这个问题。