Jquery?on("click")方法绑定事件后执行多次的解决方法
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
一、发现问题
在开发过程中,无意发现页面弹窗按钮的点击事件使用on
函数绑定click
时,产生多次请求,从而可能会造成不必要的资源消耗。
举例:
页面按钮:
代码片段:
let drBox = $('#choiceDetailPopup'), // 提交 console.log("submitTask start"); drBox.on('click','#submitTask',function(){ console.log("submitTask click"); // 处理自己的业务逻辑 …… })
浏览器console:
二、解决问题
使用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()方法给元素绑定事件的时候要格外注意多次重复绑定的问题。
总结
相关文章
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
锋利的jQuery 要点归纳 jQuery中的事件和动画(上:事件篇)2010-03-03基于jQuery UI CSS Framework开发Widget的经验
jQuery UI CSS Framework是jQuery UI中的一个样式框架,可以利用jQuery Theme roller 来生成自己想要的css样式效果。我们可以利用jQuery UI的一些框架来开发出基于jQuery UI CSS Framework效果的插件来。2010-08-08多个$(document).ready()的执行顺序实例分析
这篇文章主要介绍了多个$(document).ready()的执行顺序实例分析,对于加深理解$(document).ready()的加载与执行顺序有很大帮助,需要的朋友可以参考下2014-07-07解决同一页面中两个iframe互相调用jquery,js函数的方法
本文主要介绍了解决同一页面中两个iframe互相调用jquery,js函数的方法,具有很好的参考价值,需要的朋友可以看下2016-12-12jquery Moblie入门—hello world的示例代码学习
jquery Moblie入门:Hello World的示例代码学习,感兴趣的朋友可以了解下哦2013-01-01
最新评论