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 相关文章推荐
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
Javascript 布尔型分析
Dec 22 Javascript
Jquery优化效率 提升性能解决方案
Sep 06 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
9种改善AngularJS性能的方法
Nov 28 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
Webpack3+React16代码分割的实现
Mar 03 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
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
php基础学习之变量的使用
2011/06/09 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
php中smarty区域循环的方法
2015/06/11 PHP
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
Vue.use源码分析
2017/04/22 Javascript
React中的refs的使用教程
2018/02/13 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
python 容器总结整理
2017/04/04 Python
Django自定义认证方式用法示例
2017/06/23 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
美德少年事迹材料
2014/01/23 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
python基础入门之字典和集合
2021/06/13 Python