如何删除从特定加载文件制作的所有事件侦听器？答案

【问题标题】：How to remove all event listeners made from a specific loaded file?如何删除从特定加载文件制作的所有事件侦听器？
【发布时间】：2017-10-19 12:40:04
【问题描述】：

<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 被多次加载？

【问题讨论】：

标签： javascript c# jquery ajax

【解决方案1】：

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

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

在附加事件之前从元素取消绑定事件，这样它就不会被附加多次。

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

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

【讨论】：

这是为了解除对每个单独元素的绑定。在 someOtherScript.js 的情况下，当我删除调用它的 html 时，一切都会自行解除绑定。

【解决方案2】：

这可能是因为someScript.js 中的事件侦听器绑定到主体，而someOtherScript.js 中的事件侦听器绑定到元素本身，因此不需要检查脚本之前是否运行过的代码，但仍然适用于someScript.js。

【讨论】：