JQuery绑定change与input事件触发多次问题求助

看起来你的核心问题是140个选择器对应的元素集合里存在重复元素，或者有父子元素嵌套导致事件冒泡，从而让同一个操作触发了多次事件处理函数。下面给你几个有效的解决方案：

方案1：先对元素集合去重再绑定事件 #

当你的选择器列表里有重复的元素（比如同一个ID被重复书写，或者不同选择器匹配到了同一个元素），jQuery会给这个元素重复绑定事件，每次触发都会执行多次处理函数。我们可以先把元素集合去重，再绑定事件：

// 获取所有匹配的元素，然后去重
const allElements = $("#selector1, #selector2, #selector3, ...... #selector139, #selector140").get();
const uniqueElements = $.uniqueSort(allElements); // jQuery 3.0+ 用这个方法去重

// 给去重后的元素绑定事件
$(uniqueElements).on('change input', function(e) {
  console.log('test');
  // 你的业务代码
});

如果是旧版本jQuery，可以用$.unique()代替$.uniqueSort()。另外也可以用filter()手动标记已绑定的元素：

$("#selector1, #selector2, ..., #selector140")
  .filter(function() {
    const hasBound = $(this).data('event-bound');
    if (!hasBound) {
      $(this).data('event-bound', true);
      return true;
    }
    return false;
  })
  .on('change input', function(e) {
    console.log('test');
    // 你的业务代码
  });

方案2：阻止事件冒泡（针对父子元素嵌套的情况） #

如果你的选择器里同时包含了父元素和它的子元素，那么子元素触发事件时会通过事件冒泡传递到父元素，导致两次触发。这种情况下可以在处理函数里阻止冒泡：

$("#selector1, #selector2, ..., #selector140").on('change input', function(e) {
  // 阻止事件向上冒泡，避免父元素的事件处理函数被触发
  e.stopPropagation();
  
  console.log('test');
  // 你的业务代码
});

或者更灵活一点，只处理当前元素直接触发的事件，忽略冒泡上来的：

$("#selector1, #selector2, ..., #selector140").on('change input', function(e) {
  // 只有当事件触发的目标元素就是当前绑定元素时才执行代码
  if (e.target !== this) return;
  
  console.log('test');
  // 你的业务代码
});

方案3：使用事件委托（性能最优） #

如果这些元素都有一个共同的父容器，推荐用事件委托的方式绑定事件——只在父容器上绑定一次事件，通过选择器过滤触发事件的目标元素。这种方式不仅能避免重复触发，还能提升性能（不用给140个元素逐个绑定事件）：

// 假设所有目标元素的共同父容器是 .common-parent
$('.common-parent').on('change input', '#selector1, #selector2, ..., #selector140', function(e) {
  console.log('test');
  // 你的业务代码
});

为什么你之前的方法无效？ #

• off + on：如果选择器本身就匹配到重复元素，解绑后还是会给重复元素重复绑定事件，所以触发次数不会减少。
• e.handled标记：这个方式只对事件冒泡导致的重复触发有效（同一事件对象在冒泡链中传递），但如果是同一个元素被重复绑定了事件（多个独立的事件处理函数），每个函数都会拿到自己的事件对象，标记不会生效。
• one()：这个方法的作用是每个元素只触发一次事件，不符合你需要多次触发的业务需求，所以自然无法正常工作。

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