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保留小数点后几位的写法
Jan 03 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 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代码优化及php相关问题总结
2006/10/09 PHP
坏狼php学习 计数器实例代码
2008/06/15 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
[02:27]刀塔重生降临
2015/10/14 DOTA
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
国旗下讲话演讲稿
2014/05/08 职场文书
大学生求职信范文
2014/05/24 职场文书
农村党员一句话承诺
2014/05/30 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
2014年创卫工作总结
2014/11/24 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
Python图像处理库PIL详细使用说明
2022/04/06 Python