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实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
原生JS实现幻灯片
Feb 22 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
实例教学如何写vue插件
Nov 30 Javascript
浅析java线程中断的办法
Jul 29 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
jquery实现简易验证插件封装
Sep 13 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
使用Apache的rewrite技术
2006/06/22 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
2014/05/15 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
PHP实现的策略模式示例
2019/03/20 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
DEFER怎么用?
2006/07/01 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
Python中的Matplotlib模块入门教程
2015/04/15 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
IBatis持久层技术
2016/07/18 面试题
财务会计专业应届毕业生求职信
2013/10/18 职场文书
火灾现场处置方案
2014/05/28 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
初中政治教学工作总结
2015/08/13 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
Jsonp劫持学习
2021/04/01 PHP
Mysql MVCC机制原理详解
2021/04/20 MySQL
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs