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 相关文章推荐
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
教你使用vscode 搭建react-native开发环境
Jul 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
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
Javascript - HTML的request类
2006/07/15 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
学习python处理python编码问题
2011/03/13 Python
Python 异常处理实例详解
2014/03/12 Python
python的类方法和静态方法
2014/12/13 Python
python生成器generator用法实例分析
2015/06/04 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
python 求定积分和不定积分示例
2019/11/20 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
学生会副主席竞聘书
2014/03/31 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
小学大队委竞选口号
2015/12/25 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
一条 SQL 语句执行过程
2022/03/17 MySQL