javascript - 如何删除从特定加载文件生成的所有事件监听器？

Question

<div id="loaded-content">
    @Scripts.Render("~/someScript.js")
</div>

这似乎相当于

<div id="loaded-content">
    <script src="/someScript.js"></script>
</div>

当使用 ajax 加载上述内容时，来自 someScript.js 的每个事件监听器都会变为事件状态并保持不变，即使内容稍后通过 jQuery 删除，如下所示:

$("#loaded-content").remove();

如果内容不断加载和删除，应该如何防止相同的事件监听器被多次激活？我尝试添加一个全局变量 var scriptHasRun = false;，然后在 someScript.js 中添加以下代码:

$(document).ready(function(){
    if(scriptHasRun){
        return;
    }
    scriptHasRun = true;

    <more code>

});

它适用于 someScript.js，但随后出现的 someOtherScript.js 似乎以相同的方式加载，因此为了提前防止出现问题，我使用了相同的方法使用另一个变量 var otherScriptHasRun = false; ，第二次将其加载到页面中时，它不再起作用。当我删除支票时它开始正常工作。我想知道如何复制 someOtherScript.js 的情况，或者在正常情况下，是什么导致 someScript.js 被多次加载？

Answer 1

我发现您正在使用 jQuery。我不确定 someScript.js 中有什么，但你可以使用

$('#element').off('click', handleClick);

在附加事件之前将事件与元素解除绑定(bind)，这样它就不会多次附加。

我尝试使用的其他选项是将特定事件相关的类添加到元素，以将它们标记为已附加事件，并使用类似下面的行的内容来附加事件，以便您可以跳过使用变量 scriptHasRun 来检查脚本已加载。

$('#myElemetSelector:not(.boundToEventX)').addClass('boundToEventX').on('click',  onElemetClickedFunction);