jQuery防止重复绑定事件的解决方法


Posted in Javascript onMay 14, 2016

本文实例分析了jQuery防止重复绑定事件的解决方法。分享给大家供大家参考,具体如下:

一、问题:

今天发现jQuery一个对象的事件可以重复绑定多次,当事件触发的时候会引起代码多遍执行。

下面是一个click事件被重复绑定的示例:

function reg_button_click(){
  $("#button).click(function(){
    alert("button click");
  });
}
$(document).ready(function(){
  #重复注册3次
  reg_button_click();
  reg_button_click();
  reg_button_click();
  #触发的时候 出现3个alert
  $('#button').click();
});

二、解决方法:

对于需要重复绑定的场景,再事件注册时候考虑用先unbind 再bind的方法;或者先off 再on

function reg_button_click(){
  $("#button).unbind('click').bind('click',(function(){
    alert("button click");
  });
}
$(document).ready(function(){
  #重复注册3次
  reg_button_click();
  reg_button_click();
  reg_button_click();
  #触发的时候 出现3个alert
  $('#button').click();
});

更多关于jQuery相关内容可查看本站专题:《jQuery操作xml技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js对象关系图 方便dom操作
Mar 18 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
理解javascript中DOM事件
Dec 25 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 #Javascript
jquery动态切换背景图片的简单实现方法
May 14 #Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 #Javascript
jQuery基于扩展实现的倒计时效果
May 14 #Javascript
Angularjs中UI Router的使用方法
May 14 #Javascript
两种js监听滚轮事件的实现方法
May 13 #Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 #Javascript
You might like
phpwind中的数据库操作类
2007/01/02 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
获取Javscript执行函数名称的方法
2006/12/22 Javascript
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
Bootstrap精简教程
2015/11/27 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
vue实现购物车加减
2020/05/30 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
python SocketServer源码深入解读
2019/09/17 Python
Python数据存储之 h5py详解
2019/12/26 Python
python dict如何定义
2020/09/02 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
个人自我鉴定范文
2013/10/04 职场文书
精彩的推荐信范文
2013/11/26 职场文书
经典演讲稿范文
2013/12/30 职场文书
职业生涯规划书范文
2014/03/10 职场文书
优秀家长事迹材料
2014/05/17 职场文书
交通违章检讨书
2014/09/21 职场文书
合伙购房协议样本
2014/10/06 职场文书
详解OpenCV曝光融合
2022/04/29 Python