Jquery on("click")方法绑定事件后执行多次的解决方法
更新时间：2023年06月12日 11:05:45 作者：孙三苗
这篇文章主要给大家介绍了关于Jquery on("click")方法绑定事件后执行多次的解决方法,文章通过实例代码以及图文介绍的非常详细,对大家学习或者使用jQuery具有一定的参考学习价值,需要的朋友可以参考下
一、发现问题
在开发过程中，无意发现页面弹窗按钮的点击事件使用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()方法给元素绑定事件的时候要格外注意多次重复绑定的问题。
总结
相关文章
jQuery1.6中新添加了一个prop方法，看起来和用起来都和attr方法一样，这两个方法有什么区别呢？这要从HTMl 的attribute与property区别说起，attr与prop正是这两个东西的缩写2013-10-10
本文主要介绍了jquery实现自定义图片裁剪功能，代码超级简单，易修改。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了jQuery中addClass()方法用法,实例分析了addClass()方法的功能、定义及向匹配元素添加一个或多个类的使用技巧,需要的朋友可以参考下2015-01-01
自制一个简洁的tabs插件还是有必要的在设计之前，先整理好思路，实现tabs，自动轮换，ajax等主要功能，然后是dom的排列形式，这里采用传统的2010-07-07
这篇文章主要介绍了jQuery中scrollTop()方法用法,实例分析了scrollTop()方法的功能、定义及返回或设置匹配元素的滚动条的垂直偏移量时的使用技巧,需要的朋友可以参考下2015-01-01
Jquery通过ajax请求NodeJS返回json数据实例
本篇文章主要是介绍Jquery通过ajax请求NodeJS返回json数据，具有一定的参考价值，有需要的可以了解一下。2016-11-11
本文带你了解了一遍 jQuery 3 将会带来的一些重大变化。或许你已经注意到了，这个版本是可能对你现有的项目产生太大的影响，因为没有引入太多许多重大更改。2016-06-06
滑动菜单项效果,听起来就是很时尚的一个效果，不过实现起来有些麻烦，还好有本文的出现，可以帮助你解决这个困惑，热爱特效的你可不要错过了哈，好了话不多说切入正文2013-02-02
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
这篇文章主要介绍了jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法,涉及jQuery插件EasyUI相关属性设置技巧,需要的朋友可以参考下2016-08-08
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
以前对于JavaScript总是在用到的时候在页面上写几个函数，基本没考虑到函数的封装与重用，最近有个项目可能对于这方面要求有点高，所以就研究了下类似jQuery的封装2012-06-06
最新评论