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 相关文章推荐
在html页面中包含共享页面的方法
Oct 24 Javascript
js 可拖动列表实现代码
Dec 13 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 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/10/09 PHP
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
php发送邮件的问题详解
2015/06/22 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
Python+Opencv识别两张相似图片
2020/03/23 Python
pandas值替换方法
2018/07/10 Python
Django model序列化为json的方法示例
2018/10/16 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
实习自荐信
2013/10/13 职场文书
外贸业务员岗位职责
2013/11/24 职场文书
创先争优演讲稿
2014/09/15 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
2015年少先队活动总结
2015/03/25 职场文书
大国崛起日本观后感
2015/06/02 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
新教师教学工作总结
2015/08/12 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android