内容字号: 默认 大号 超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到宋体切换到微软雅黑

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

发布:2016-11-14 浏览: 评论(

我们在使用$(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(){
        //执行代码
    })
})
前端新手交流群
欢迎加入web前端新手交流qq群:734802480

更多文章

相关文章

评论

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。


Copyright © 2014-2021 seozhijia.net 版权所有-粤ICP备13087626号-4