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 遍历对象的属性的代码
Dec 29 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
javascript 闭包详解
Feb 15 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
详解原生JS动态添加和删除类
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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php 文件状态缓存带来的问题
2008/12/14 PHP
php开发环境配置记录
2011/01/14 PHP
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
phpfpm的作用和用法
2019/10/10 PHP
Mootools 1.2教程 类(一)
2009/09/15 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
清除输入框内的空格
2016/12/21 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
python逆向入门教程
2018/01/15 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
Django中的session用法详解
2020/03/09 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
JNI的定义
2012/11/25 面试题
生物制药毕业生自荐信
2013/10/16 职场文书
汽车专业毕业生自荐信
2013/11/03 职场文书
服务行业演讲稿
2014/09/02 职场文书
劳资员岗位职责
2015/02/13 职场文书
财政局个人年终总结
2015/03/03 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
MySQL限制查询和数据排序介绍
2022/03/25 MySQL
MySQL 数据库范式化设计理论
2022/04/22 MySQL