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 相关文章推荐
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
javascript实现完美拖拽效果
May 06 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
Js apply方法详解
Feb 16 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
JavaScript回调函数callback用法解析
Jan 14 Javascript
详解JS ES6编码规范
May 07 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记录日志的实现代码
2011/08/08 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
php经典趣味算法实例代码
2020/01/21 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
Python编写生成验证码的脚本的教程
2015/05/04 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
itchat接口使用示例
2017/10/23 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
Python测试线程应用程序过程解析
2019/12/31 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
兼职学生的自我评价
2013/11/24 职场文书
升职自荐书范文
2013/11/28 职场文书
教师绩效工资方案
2014/02/01 职场文书
销售总经理岗位职责
2014/03/15 职场文书
个人授权委托书范本
2014/04/03 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
2014年保洁工作总结
2014/11/24 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python