（转）关于jquery的$(document).on()事件多次执行的问题

http://www.seozhijia.net/javascript/99.html

 

我们在使用$(document).on()来绑定事件的时候，有时候会出现同一个事件会执行多次的问题，为什么会这样呢？其实很简单，就是这段代码在执行的过程中进行了多次绑定，或者将$(document).on()放在了循环里，或者是相互嵌套用on()事件，笔者曾经犯过相互嵌套用得错误，比如，在弹出一个窗口之后，这个窗口上有很多的点击事件，按照下面这样写就会出现多次绑定的情况；

嵌套写法：

$(document).on("click",".popup-confirm-new-up",function(){
      //执行代码
   $(document).on("click",".up-product-button-sure",function(){
         //执行代码
   });

   $(document).on("click",".up-product-button-cancel",function(){
         //执行代码
   });
})(document).on("click",".popup-confirm-new-up",function(){
      //执行代码
   $(document).on("click",".up-product-button-sure",function(){
         //执行代码
   });

   $(document).on("click",".up-product-button-cancel",function(){
         //执行代码
   });
})

 

以上这种写法，虽然在代码的分布上面比较好看，但是弊端就是当外面的大事件执行多次的时候，里面的绑定事件就会执行多次，正确的写法如下，把他们都独立出来写：
 

$(document).on("click",".popup-confirm-new-up",function(){
    //执行代码
   
})
$(document).on("click",".up-product-button-sure",function(){
    //执行代码
});

$(document).on("click",".up-product-button-cancel",function(){
   //执行代码
});(document).on("click",".popup-confirm-new-up",function(){
    //执行代码
   
})
$(document).on("click",".up-product-button-sure",function(){
    //执行代码
});

$(document).on("click",".up-product-button-cancel",function(){
   //执行代码
});

 

所以，注意：相互嵌套的写法不推荐。

但是如果你一定要嵌套这种写法，还有一个解决多次绑定多次执行的办法就是在绑定之前先解绑一次，上面on事件嵌套的写法如下：

$(document).on("click",".popup-confirm-new-up",function(){
   
    //执行代码
      //执行代码
   $(document).off("click",".up-product-button-sure").on("click",".up-product-button-sure",function(){
         //执行代码
   });

   $(document).off("click",".up-product-button-cancel").on("click",".up-product-button-cancel",function(){
         //执行代码
   });
   
})
//注意:是哪个事件会多次执行就在哪个on()前面先绑一次off();比如本文第一种写法，就应该是里面的两个on()前面加off()解绑事件;(document).on("click",".popup-confirm-new-up",function(){
   
    //执行代码
      //执行代码
   $(document).off("click",".up-product-button-sure").on("click",".up-product-button-sure",function(){
         //执行代码
   });

   $(document).off("click",".up-product-button-cancel").on("click",".up-product-button-cancel",function(){
         //执行代码
   });
   
})
//注意:是哪个事件会多次执行就在哪个on()前面先绑一次off();比如本文第一种写法，就应该是里面的两个on()前面加off()解绑事件;

先解绑再绑定，就可以避免多次执行。
 

 

不使用document绑定事件，常见的嵌套写法还有：

 

$(".selector").on("click",function(){
     //执行代码

     $(".selectorA").off("click").on("click",function(){
         //执行代码
     })


     $(".selectorB").off("click").on("click",function(){
         //执行代码
     })
})
(".selector").on("click",function(){
     //执行代码

     $(".selectorA").off("click").on("click",function(){
         //执行代码
     })


     $(".selectorB").off("click").on("click",function(){
         //执行代码
     })
})

 

jQuery解除绑定事件 https://www.cnblogs.com/superCwen/p/9917672.html