动态添加按钮后点击事件重复触发的解决方法咨询

这问题我之前开发动态组件时也踩过坑，核心原因很明确：你每次点击AddBtn添加新按钮后，都会调用ActiveFunc()，而这个函数会给所有已存在的.doSomething按钮（包括旧按钮）重新绑定一次点击事件。次数多了，旧按钮的事件绑定就叠加了，点一次自然会触发多次alert。

而且你提到“直接声明函数对动态添加的button无效”，这是因为普通的$('.doSomething').on('click', ...)只能绑定当前DOM中已存在的元素，动态生成的按钮在绑定代码执行时还没被创建，所以不会被绑定事件。

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

方案1：使用事件委托（最推荐，高效且无重复问题） #

事件委托是利用DOM事件冒泡机制，把点击事件绑定到静态存在的父元素上（比如你的#div_容器），不管后续动态添加多少按钮，点击事件都会自动生效，而且只需要绑定一次，完全避免重复绑定的问题。

修改后的完整代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="Add_Btn">AddBtn</button><br>
<div id="div_"></div>

<script>
$(function() {
  // 只需要绑定一次事件委托，父元素#div_是静态存在的
  $('#div_').on('click', '.doSomething', function() {
    alert('Clicked');
  });

  // 添加按钮的逻辑
  $('#Add_Btn').on('click', function() {
    var btnElem = '<button type="button" class="doSomething">Button</button><br>';
    $('#div_').append(btnElem);
  });
});
</script>

原理说明： #

当你点击任何.doSomething按钮（不管是一开始就有的还是后来动态添加的），点击事件会向上冒泡到父元素#div_，此时#div_会检查触发事件的元素是不是.doSomething，如果是就执行回调函数。这种方式不需要每次添加按钮都重新绑定事件，是处理动态元素事件的标准方案。

方案2：解绑后再绑定（不推荐，仅作补充） #

如果因为某些原因你必须保留原来的绑定逻辑，可以在重新绑定前先解绑按钮上已有的click事件，避免重复绑定。但这种方法效率较低，而且可能会误删除其他地方绑定的同类型事件，所以优先选方案1。

修改ActiveFunc函数即可：

function ActiveFunc(){
  // 先解绑所有已绑定的click事件，再重新绑定
  $('.doSomething').off('click').on('click',function(){
    alert('Clicked');
  });
}

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