js动态添加DOM，绑定事件会重复执行

2017-11-09

使用动态 js 添加DOM，同时对加入的内容绑定点击事件的时候。该事件会重复执行
比如：

<body>
  <div class="checkbox1">
      <h1>这是个标题</h1>
  </div>
<div class="change" style="cursor: pointer;color: red;">点击添加一个标题</div>
  <script type="text/javascript" src="js/components.js"></script>
  <script type="text/javascript">
      $(".change").click( function () {
          $(".checkbox1").append('<div class="check-all"><span><h2>这是另外一个标题</h2></span></div>');
          //$(".check-all span").off("click");
          $(".check-all span").click(function () {
              console.log("a");
          })
          /* $(".check-all span").unbind("click").click(function(){
           console.log("ss");
           });*/
          /* $(".checkbox1").on("click", ".check-all span", function () {
           console.log("ss");
           });*/
      });
  </script>
</body>

你添加两次标题的时候，你会发现，console 台输出了2次 a。
解决办法如下：
1、在绑定事件之前，对该事件解绑，

$(".check-all span").off("click");
          $(".check-all span").click(function () {
              console.log("aa");
          })

2、unbind(‘click’)上一次的click事件

1
2
3

$(".check-all span").unbind("click").click(function(){
           console.log("ss");
           });

建议：不要通过on的方式绑定事件，这种方式会将原来的方法添加到新方法中，就会出现执行多次。

1
2
3

$(".checkbox1").on("click", ".check-all span", function () {
           console.log("ss");
           });