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动画效果代码3
Apr 03 Javascript
node.js中的fs.write方法使用说明
Dec 15 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
详谈js模块化规范
Jul 07 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
Node.js使用supervisor进行开发中调试的方法
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
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
php中数据的批量导入(csv文件)
2006/10/09 PHP
怎样去阅读一份php源代码
2009/08/21 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
超清晰的document对象详解
2007/02/27 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
python利用tkinter实现屏保
2019/07/30 Python
Django如何实现上传图片功能
2019/08/16 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
会计师职业生涯规划范文
2014/02/18 职场文书
班组长安全工作职责
2014/07/15 职场文书
单位委托书格式范本
2014/09/29 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android