JavaScript事件作用域疑问：ASP.NET环境下重复绑定的点击事件无法移除

事件无法移除的核心原因 #

你遇到的移除失效问题和脚本实例作用域无关，核心是两种常见的参数不匹配问题：

• 如果你使用的是jQuery委托绑定（例如$(document).on('click', '.btn', function(){})），调用.off()时必须和绑定时的参数完全一致：事件类型、目标选择器、处理函数三者完全匹配才能成功移除，只要有一个参数不一致就会移除失败。
• 无论使用jQuery还是原生JS，只要绑定事件时使用了匿名函数，第二次执行脚本时生成的匿名函数是全新的对象，和第一次绑定时的函数引用不匹配，调用.off()或.removeEventListener()时传入的新函数无法匹配到已绑定的函数，自然无法移除原有事件。

关于脚本作用域的疑问 #

同一段脚本重复加载执行确实会生成新的函数实例，但事件监听器是绑定在DOM元素上而非脚本实例上，只要你能拿到第一次绑定时的处理函数引用，无论在哪个执行上下文都可以正常移除事件。移除失败的本质是参数不匹配或无法拿到原有函数引用，并非跨脚本实例无法操作。

推荐解决方案 #

方案1：使用jQuery事件命名空间（适配现有代码的最快方案） #

绑定事件时追加自定义命名空间，移除时直接按命名空间操作，不需要匹配处理函数引用：

// 普通绑定写法
$('.target-btn').off('click.commonBind').on('click.commonBind', function() {
  // 你的业务逻辑
})

// 委托绑定写法
$(document).off('click.commonBind', '.target-btn').on('click.commonBind', '.target-btn', function() {
  // 你的业务逻辑
})

这种方式哪怕使用匿名函数也能正常移除，不需要调整现有逻辑结构。

方案2：全局挂载处理函数，保证引用唯一 #

将事件处理函数挂载到window全局对象，避免重复生成新的函数实例：

// 仅当处理函数未定义时初始化，避免重复覆盖
if (!window.commonBtnHandler) {
  window.commonBtnHandler = function() {
    // 你的业务逻辑
  }
}

// jQuery绑定写法
$('.target-btn').off('click', window.commonBtnHandler).on('click', window.commonBtnHandler)

// 原生JS绑定写法
document.querySelectorAll('.target-btn').forEach(el => {
  el.removeEventListener('click', window.commonBtnHandler)
  el.addEventListener('click', window.commonBtnHandler)
})

方案3：从根源避免重复绑定（最优解） #

完全不需要在partial view中重复引用脚本，仅在主页面加载一次脚本，使用委托绑定将事件挂在主页面不会被销毁的父容器（或document）上，后续动态加载的partial view元素会自动匹配到委托事件，从根源解决重复绑定问题：

// 主页面document ready阶段仅执行一次即可
$(document).on('click', '.target-btn', function() {
  // 你的业务逻辑，主页面原有元素和动态加载的partial view元素均可触发
})

内容的提问来源于stack exchange，提问作者yellephen