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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
简单学习vue指令directive
Nov 03 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 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脚本
2006/11/26 PHP
php email邮箱正则
2008/10/08 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
Python处理session的方法整理
2019/08/29 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
员工评语大全
2014/01/19 职场文书
小学信息技术教学反思
2014/02/10 职场文书
设计大赛策划方案
2014/06/13 职场文书
上课不认真检讨书
2014/09/17 职场文书
交通事故委托书范本
2014/09/28 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
python语言中pandas字符串分割str.split()函数
2022/08/05 Python