本文实例分析了jQuery防止重复绑定事件的解决方法。分享给大家供大家参考,具体如下:

一、问题:

今天发现jQuery一个对象的事件可以重复绑定多次,当事件触发的时候会引起代码多遍执行。

下面是一个click事件被重复绑定的示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
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

1
2
3
4
5
6
7
8
9
10
11
12
13
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事件重复绑定的更多相关文章

  1. jquery事件重复绑定的几种解决方法 (二)

    防止事件重复绑定共有4种方法: bind().unbind()方法 live().die()方法 off().on()方法 one()方法 一.bind().unbind()方法 bind();绑定事 ...

  2. jquery事件重复绑定的几种解决方法

    防止事件重复绑定共有4种方法: bind().unbind()方法 live().die()方法 off().on()方法 one()方法 一.bind().unbind()方法 bind();绑定事 ...

  3. jquery事件重复绑定解决办法

    一$.fn.live 重复绑定 解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件. //先通过die()方法解除,再通过 ...

  4. jquery事件重复绑定的快速解决方法

    click等事件 解决:使用unbind("click")方法先解除绑定的事件再绑定新事件,即在给对象绑定事件之前先移除该对象上的原有事件 1 $("#test2&quo ...

  5. 解决pjax重复加载js导致事件重复绑定的问题

    个人博客 地址:http://www.wenhaofan.com/article/20180925232057 1.所有js统一在pjax容器外引入 在pjax容器外引入的js只会被引入一次,所以不会 ...

  6. JQuery事件的绑定

    关于jQuery事件绑定html: <a href="#" onclick="addBtn()">addBtn</a> <div ...

  7. 解密jQuery事件核心 - 绑定设计(一)

    说起jQuery的事件,不得不提一下Dean Edwards大神 addEvent库,很多流行的类库的基本思想从他那儿借来的 jQuery的事件处理机制吸取了JavaScript专家Dean Edwa ...

  8. jquery 事件的绑定,触发和解绑

    js和jquery绑定的区别? HTML或原生js是单一对应绑定的,绑多了只留最后一个.jQuery是追加绑定的,绑多少执行多少.这个在每一本jQuery的书中都是首先提到的事情. jquery绑定与 ...

  9. jquery中事件重复绑定以及解绑问题

    一般的情况下,对于这种情况,我们常规的思路是,先解绑,再绑定,如下: $(selector).unbind('click').bind('click',function(){....}); 当这样会有 ...

随机推荐

  1. 2017-2018 ACM-ICPC Latin American Regional Programming Contest

    题面pdfhttps://codeforc.es/gym/101889/attachments/download/7471/statements-2017-latam-regional.pdf zyn ...

  2. ad 层次绘图遇到的元件堆积问题

    元器件复用一般我们使用 reapeat 来复用 总线形式引出各个引脚,有时候我们也可以通过简单的复制实现.但是注意上图 原理图作为一个元件使用,他和单个元件一样必须有唯一ID,名字,不然也会出现冲突, ...

  3. 在ubuntu系统中,python依赖存放的路径

    你在使用python,之后你想给python安装一些第三方库,如tensorflow或者tensorrt,那么这些包存放在哪个路径下呢? 该目录下: /usr/local/lib/python3.5/ ...

  4. 1.7Oob 成员变量可以不初始化 但局部变量必须初始化

    成员变量有默认的初始值 像int a; a默认为0:而局部变量没有初始值

  5. deepin修改javahome不生效,一直显示openjdk解决

    删除/usr/bin/java即可 terwer@terwer-PC:~$ sudo rm /usr/bin/java [sudo] terwer 的密码: terwer@terwer-PC:~$ j ...

  6. [development][C][thread_local] 线程全局变量

    线程全局变量, 线程本地存储, thread_local storage 只需要在变量定义的最前边添加 __thread 关键字. 用法: https://gcc.gnu.org/onlinedocs ...

  7. [adminstrative][CentOS] CentOS 7 常用操作笔记

    CentOS从6换到7, 还没有系统的学习.虽然主要用的是systemd,但还是有一下特有的区别,会逐步整理如下: 官网文档索引:https://access.redhat.com/documenta ...

  8. 模拟器运行报错:ld: symbol(s) not found for architecture x86_64

    模拟器运行报错: 报错信息如下: Undefined symbols for architecture x86_64: "_x264_encoder_open_142", refe ...

  9. 基于VUE,VUX组件开发的网易新闻页面搭建过程

    根据妙味课堂上的一个教程练习总结,供自己复习用 一.功能介绍 一个网易新闻客户端的浏览页面,通过网易新闻的api接口实时获取新闻数据,用vux搭建样式框架,以轮播图,文字滚动,图文列表等形式把内容展示 ...

  10. nginx最基本操作

    1.安装 yum install nginx 2.查看配置位置 nginx -t 3.查看nginx.conf,找到默认html配置路径 vi /etc/nginx/nginx.conf cd /us ...