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);

在附加之前从元素取消绑定事件，因此它不会多次附加。

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

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

Answer 2

这可能是因为someScript.js中的事件侦听器绑定到了正文，而someOtherScript.js中的事件侦听器绑定到了元素本身，因此检查脚本是否已被绑定的代码在他们不需要之前运行，但仍然是someScript.js。

如何删除由特定加载文件生成的所有事件侦听器？

2 个答案: