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 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
PHP读取PDF内容配合Xpdf的使用
2012/11/24 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
PDO::rollBack讲解
2019/01/29 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
Python机器学习logistic回归代码解析
2018/01/17 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
Python中函数参数匹配模型详解
2019/06/09 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
如何用python处理excel表格
2020/06/09 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
Java中compareTo和compare的区别
2016/04/12 面试题
超市端午节活动方案
2014/01/23 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
太太口服液广告词
2014/03/20 职场文书
父亲节活动策划方案
2014/08/24 职场文书
企业投资意向书
2015/05/09 职场文书
关于环保的宣传稿
2015/07/23 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
2016年教师节慰问信
2015/12/01 职场文书