一起来解决下这个JS问题吧

解答思路

点击一次却触发多次回调，通常是因为同一个元素被重复绑定了多次相同的 click 事件（比如在某个会被多次执行的初始化逻辑里反复调用了 .on("click", ...)），解决方法是在重新绑定之前先用 .off() 解绑，避免事件重复累加。

示例代码

// 问题代码：如果这段逻辑被多次执行，会重复绑定 click 事件
$("#button").on("click", function (e) {
  // ...
});

// 修复：绑定前先解绑，保证同一元素只绑定一次
$("#button").off("click").on("click", function (e) {
  // ...
});

详细说明

jQuery 的 .on() 方法每调用一次，就会给元素新增一个事件处理函数，而不是替换旧的处理函数。如果某段绑定代码（比如页面初始化、组件重新渲染等逻辑）被意外执行了多次，#button 上就会累积挂载多个功能相同的 click 回调，点击一次自然就会依次触发这些重复的回调，看起来像是点一次执行了好几次。解决办法是在重新绑定事件之前，先用 .off("click") 把该元素上已绑定的同类型事件全部移除，再执行 .on("click", ...)，从而保证同一元素上始终只有一份有效的事件绑定。

小结

点一次触发多次的典型原因是事件被重复绑定；养成绑定前先 .off() 解绑的习惯，或者确保绑定逻辑只会执行一次，就能避免这类问题。