动态添加复选框时change事件重复触发问题求助

你遇到的核心问题是重复绑定事件：每次点击按钮时，你都通过$('div :checkbox').change(...)给所有已存在的复选框又绑定了一次change事件。比如当页面有4个复选框时，checkbox1已经被绑定了4次事件，所以点击它会触发4次；checkbox3被绑定了2次，触发2次，以此类推。

下面给你两种简单的解决方案，优先推荐第一种：

方案1：使用事件委托（最简洁高效） #

利用jQuery的事件委托机制，把事件绑定在静态的父元素（比如你的div）上，监听所有子复选框的change事件。不管是页面初始就有的，还是后来动态添加的复选框，都会通过事件冒泡触发这个绑定在父元素上的事件，而且只需要绑定一次，完全避免重复绑定的问题。

修改后的完整代码：

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>
<style>
#btn { 
  width: 100px; 
  height: 100px; 
  background-color: yellow; 
  display: block; 
} 
</style>
<div> 
  <input type="checkbox" id="checkbox1"> 
  <label for="checkbox1">Checkbox 1</label> 
  <button type="button" id="btn">Click Me!</button> 
</div>
<script>
$(function() { 
  var checkboxCnt = 1; 
  // 只绑定一次事件委托，监听div内所有复选框的change事件
  $('div').on('change', ':checkbox', function(e) { 
    checkboxChanged(e); 
  }); 

  $('#btn').click(function() { 
    checkboxCnt++; 
    var checkboxHtml = `<br><input type="checkbox" id="checkbox${checkboxCnt}">` + `<label for="checkbox${checkboxCnt}">Checkbox ${checkboxCnt}</label>`; 
    $(this).before($(checkboxHtml)); 
  }); 

  function checkboxChanged(e) { 
    var checkboxID = '#' + e.target.id; 
    if ($(checkboxID).is(':checked')) { 
      console.log(checkboxID + ' is checked'); 
    } else { 
      console.log(checkboxID + ' is unchecked'); 
    } 
  } 
}); 
</script>

方案2：仅给新增的复选框绑定事件 #

如果你不想用事件委托，也可以在每次新增复选框后，只给刚添加的那个元素绑定change事件，而不是给所有复选框重新绑定。

修改后的点击事件部分代码：

$('#btn').click(function() { 
  checkboxCnt++; 
  var checkboxHtml = `<br><input type="checkbox" id="checkbox${checkboxCnt}">` + `<label for="checkbox${checkboxCnt}">Checkbox ${checkboxCnt}</label>`; 
  // 先把新元素添加到页面，然后获取它并绑定事件
  var newCheckbox = $(checkboxHtml).insertBefore($(this));
  newCheckbox.find(':checkbox').change(function(e) { 
    checkboxChanged(e); 
  }); 
}); 

同时记得去掉页面初始化时对所有复选框的重复绑定（只保留初始复选框的绑定，或者直接用方案1更省心）。

为什么方案1更好？ #

事件委托不需要每次动态添加元素时都手动绑定事件，代码更简洁，也避免了因为疏忽导致的重复绑定问题，尤其适合频繁添加动态元素的场景。

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