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 相关文章推荐
php图像生成函数之间的区别分析
Dec 06 Javascript
JavaScript中数组继承的简单示例
Jul 29 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 Javascript
React更新渲染原理深入分析
Dec 24 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
微信支付开发告警通知实例
2016/07/12 PHP
PHP自定义错误用法示例
2016/09/28 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
jquery+css实现下拉列表功能
2017/09/03 jQuery
vue服务端渲染缓存应用详解
2018/09/12 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
Python实现类继承实例
2014/07/04 Python
跟老齐学Python之关于类的初步认识
2014/10/11 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
新学期开学寄语
2014/01/18 职场文书
校园文化标语
2014/06/18 职场文书
2014年党员整改措施
2014/10/24 职场文书
学生检讨书
2015/01/27 职场文书
优秀党员个人总结
2015/02/14 职场文书
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android