如何避免相同.cancel按钮的onclick事件多次触发（无需修改按钮）

方法1：绑定前清除已有事件 #

重复执行绑定代码会导致每个按钮挂载多个相同监听器，绑定前先移除原有点击事件，确保每个按钮仅保留一个监听器：

$('button.cancel').off('click').on('click', function(event) {
  // 这里写你的业务逻辑
});

off('click')会清除所有绑定在button.cancel元素上的点击事件，再重新绑定新的监听器。

方法2：事件委托（推荐适配库组件场景） #

将事件绑定到按钮的父容器而非按钮本身，利用事件冒泡机制，仅绑定一次即可覆盖所有同类型按钮，且兼容动态生成的组件按钮：

// 替换成按钮实际的父容器选择器，比如.modal、.content-wrap等
$('.parent-container').off('click', 'button.cancel').on('click', 'button.cancel', function(event) {
  // 这里写你的业务逻辑
});

这种方式避免了给每个按钮单独绑定事件，从根源上解决多触发问题，同时性能更优。

方法3：单次触发场景用one() #

如果按钮仅需响应一次点击，之后无需再触发，直接使用one()方法，它会在事件触发后自动解绑：

$('button.cancel').one('click', function(event) {
  // 这里写你的业务逻辑
});

排查小贴士 #

• 检查代码中是否在组件渲染回调、定时器或循环里重复执行了事件绑定代码，这是导致重复绑定的常见原因。
• 使用事件委托时，尽量选择最接近按钮的父元素，减少事件冒泡层级。

内容的提问来源于stack exchange，提问作者Irmantas Želionis