(转)关于jquery的$(document).on()事件多次执行的问题
2018-02-01 13:59
573 查看
http://www.seozhijia.net/javascript/99.html
我们在使用$(document).on()来绑定事件的时候,有时候会出现同一个事件会执行多次的问题,为什么会这样呢?其实很简单,就是这段代码在执行的过程中进行了多次绑定,或者将$(document).on()放在了循环里,或者是相互嵌套用on()事件,笔者曾经犯过相互嵌套用得错误,比如,在弹出一个窗口之后,这个窗口上有很多的点击事件,按照下面这样写就会出现多次绑定的情况;
嵌套写法:
以上这种写法,虽然在代码的分布上面比较好看,但是弊端就是当外面的大事件执行多次的时候,里面的绑定事件就会执行多次,正确的写法如下,把他们都独立出来写:
所以,注意:相互嵌套的写法不推荐。
但是如果你一定要嵌套这种写法,还有一个解决多次绑定多次执行的办法就是在绑定之前先解绑一次,上面on事件嵌套的写法如下:
先解绑再绑定,就可以避免多次执行。
不使用document绑定事件,常见的嵌套写法还有:
我们在使用$(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(){ //执行代码 });
所以,注意:相互嵌套的写法不推荐。
但是如果你一定要嵌套这种写法,还有一个解决多次绑定多次执行的办法就是在绑定之前先解绑一次,上面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绑定事件,常见的嵌套写法还有:
$(".selector").on("click",function(){ //执行代码 $(".selectorA").off("click").on("click",function(){ //执行代码 }) $(".selectorB").off("click").on("click",function(){ //执行代码 }) })
相关文章推荐
- jquery 绑定点击事件 多次执行问题
- Jquery on方法绑定事件后执行多次
- 关于jquery中用on绑定事件后的事件冒泡问题
- jQuery mouseover,mouseout事件多次执行的问题处理
- jQuery 动态绑定的方法多次执行的解决 jQuery(document).on(
- 关于Wcf事件多次执行的问题
- 关于jquery on方法进行事件绑定触发次数指数叠加的问题
- jquery 自定义click事件执行多次
- 关于jquery easyui datagrid执行多次的问题
- RXSwift 关于使用textFiled的时候onCompleted 什么时间执行的问题
- 关于jQuery绑定事件on和bind的区别详解 -- sanai
- 关于jQuery新的事件绑定机制on()的使用技巧
- 解决事件多次绑定,执行多次问题
- 【JQuery-02】事件绑定多次造成多次执行
- jQuery中on绑定事件后引发的事件冒泡问题如何解决
- 关于js事件执行onunload 但不执行onbeforeunload
- 关于jquery 的绑定事件on 如何绑定动态生成的dom元素
- 关于jQuery双事件多重加载的问题。
- 关于jquery的obj.click()、和obj.on()以及行内的onclick事件
- Jquery 使用 onpropertychange 会被执行2遍 以及 onpropertychange 事件参数 不用attachEvent