jQuery嵌套点击函数重复触发问题求助

问题根源 #

每次点击btn1时，你都会执行$(".btn2").click(...)——这意味着所有已存在的.btn2按钮都会被重复绑定一次点击事件。第一次点击btn1，生成的第一个.btn2被绑定1次事件；第二次点击btn1，新生成的.btn2被绑定1次，同时旧的.btn2又被多绑定1次。此时点击.btn2，两个事件回调会同时执行，所以<i>After</i>会被输出两次，点击次数越多，触发次数越多。

解决方案 #

下面提供几种实用的解决方式，按需选择：

1. 只给新添加的.btn2绑定事件（精准绑定）

修改btn1的点击逻辑，直接给刚插入的按钮绑定事件，避免全局选择所有.btn2：

$(document).ready(function(){
  $("#btn1").click(function(){
    // 链式操作，仅为本次新增的.btn2绑定事件
    $("<b>Before</b><button class='btn2'>Insert after</button>")
      .insertBefore("#check")
      .filter(".btn2")
      .click(function(){
        $("#check").after("<i>After</i>");
      });
  });
});

2. 事件委托（推荐，性能最优）

利用事件冒泡原理，把点击事件绑定到静态父元素（比如body，或者更接近的容器），后续动态生成的.btn2都会自动触发事件，且仅绑定一次：

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#check").before("<b>Before</b><button class='btn2'>Insert after</button>");
  });
  
  // 事件委托：父元素监听子元素的点击事件
  $("body").on("click", ".btn2", function(){
    $("#check").after("<i>After</i>");
  });
});

3. 绑定前移除旧事件（兼容原有写法）

如果不想改动太多原有逻辑，可以在绑定新事件前，先移除.btn2上已有的点击事件，避免叠加：

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#check").before("<b>Before</b><button class='btn2'>Insert after</button>");
    // 先解绑所有点击事件，再重新绑定
    $(".btn2").off("click").click(function(){
      $("#check").after("<i>After</i>");
    });
  });
});

4. 避免重复生成.btn2（从源头解决）

每次点击btn1时，先移除之前添加的内容，保证页面始终只有一个.btn2：

$(document).ready(function(){
  $("#btn1").click(function(){
    // 清除之前添加的Before文本和.btn2按钮
    $("#check").prevAll("b, .btn2").remove();
    $("#check").before("<b>Before</b><button class='btn2'>Insert after</button>");
    $(".btn2").click(function(){
      $("#check").after("<i>After</i>");
    });
  });
});

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