jquery

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > jquery > Jquery on("click")绑定事件执行多次

Jquery on("click")方法绑定事件后执行多次的解决方法

作者:孙三苗

这篇文章主要给大家介绍了关于Jquery on("click")方法绑定事件后执行多次的解决方法,文章通过实例代码以及图文介绍的非常详细,对大家学习或者使用jQuery具有一定的参考学习价值,需要的朋友可以参考下

一、发现问题

在开发过程中,无意发现页面弹窗按钮的点击事件使用on函数绑定click 时,产生多次请求,从而可能会造成不必要的资源消耗。

举例:

页面按钮:

代码片段:

let drBox = $('#choiceDetailPopup'),
// 提交
console.log("submitTask start");
drBox.on('click','#submitTask',function(){
    console.log("submitTask click");
    // 处理自己的业务逻辑 ……
})

浏览器console:

image.png

二、解决问题

使用js动态加载内容,同时需要对加入的内容绑定点击事件的,on(‘click’,function(){}) 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次。

在每次绑定事件之前,对该事件解绑,可以使用的办法:

.off(“click”); //解除绑定点击事件
.unbind("click");//移除绑定点击事件
.unbind(); //移除所有绑定事件

我采用第一种办法,直接在 on 绑定 click 前,先释放,再绑定。

原代码片段修改如下:

let drBox = $('#choiceDetailPopup'),
// 提交
console.log("submitTask start");
drBox.off('click').on('click','#submitTask',function(){
    console.log("submitTask click");
    // 处理自己的业务逻辑 ……
})

修改后,浏览器console如下:

事件触发正常了。

实际的场景可能会复杂得多,因此在使用on()方法给元素绑定事件的时候要格外注意多次重复绑定的问题。

总结

您可能感兴趣的文章:
阅读全文