解析JS绑定事件重复触发问题 第二步

三、原因

此时我们分析上面这段代码这么写有什么问题。为什么会事件会累加执行？可以看出出第二次的事件绑定和第一次的事件绑定都注册到了同一个DIV身上，在JQ中事件注册同时注册到同一个DIV身时。只要不消毁就会累计执行。这就是根本 原因所在。可能有的人此时想到是不是因为事件冒泡的原因，那我们阻止完了事件冒泡结果是什么呢？

$(function(){

    $(".add").on('click',function(eve){

      $(".area").append("<button class='test-btn'>test button</button>");      

      $(".area").on('click','.test-btn',function(event){

        event.stopPropagation();

        console.log("test button .....");     

      });

    });

});

事实结果是一样的。这个跟事件冒泡没有根本上的联系，如果那我是不是只有在绑定时才会出现累计打执行呢。那我们来试下不用on的执行结果是什么

$(function(){

    $(".add").click(function(eve){

      $(".area").append("<button class='test-btn'>test button</button>");      

      $(".test-btn").click(function(){

        console.log("test button .....");

      });

    });

});

结果依然一样，在事件执行的时候在同一个元素上注册执行的事件还是执行了多次。那如何解决这个问题

四、解决方法：

1）绑定之前先解绑

$(function(){

    $(".add").on('click',function(eve){

      $(".area").append("<button class='test-btn'>test button</button>");

     //解除

      $(".area").off("click");

     //再绑定

      $(".area").on('click','.test-btn',function(event){

        console.log("test button .....");

        event.stopPropagation();

      });

    });

});

2）分开写

$(function(){

    $(".add").on('click',function(eve){

      $(".area").append("<button class='test-btn'>test button</button>");

    });

     $(".area").on('click','.test-btn',function(){

        console.log("test button .....");

      });

});

总结：上面列举的只不过是一个小例子，在工作当开发会碰到比这更复杂更多的多层事件问题，尤其在多个URL请求时，如果处理不好，大家不自测和检查自己的代码，就会出来事件一次。多次请求的问题。这些问题也是在公司团队中的同事经常犯的一些错误，所以在今后开发的过程中，要养成一个好的编程习惯 ，才能保证代码的更强壮。