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 相关文章推荐
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
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防止sql注入之过滤分页参数实例
2014/11/03 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
js form action动态修改方法
2008/11/04 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
js对象数组和对象的使用实例详解
2019/08/27 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
python双向链表实现实例代码
2013/11/21 Python
不要用强制方法杀掉python线程
2017/02/26 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
梅西百货官网:Macy’s
2020/08/04 全球购物
环境科学专业个人求职的自我评价
2013/11/28 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
出国考察邀请函
2014/01/21 职场文书
家长对孩子评语
2014/01/30 职场文书
工作决心书
2014/03/11 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
Nginx快速入门教程
2021/03/31 Servers