本文实例分析了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. Linux系统下升级Python版本步骤(suse系统)

    Linux系统下升级Python版本步骤(suse系统) http://blog.csdn.net/lifengling1234/article/details/53536493

  2. .Net Windows Service(服务) 调试安装及System.Timers.Timer 使用

    Windows Service(服务)  是运行在后台的进程 1.VS建立 Windows 服务(.NET Framework) 2.添加Timer 双击Service1.cs可以拖控件(System ...

  3. 洛谷P1192 台阶问题【记忆化搜索】

    题目:https://www.luogu.org/problemnew/show/P1192 题意: 给定n和k,一个人一次可以迈1~k步,问走n步有多少种方案. 思路: 本来傻乎乎上来就递归,显然会 ...

  4. POJ 2259 - Team Queue - [队列的邻接表]

    题目链接:http://poj.org/problem?id=2259 Queues and Priority Queues are data structures which are known t ...

  5. iOS 抽取app中的图片图标资源

    iTunes 12.6之前的版本,我们手机连上MAC之后,可以在iTunes里看到应用选项,但是12.8之后的版本就不行了.无法通过iTunes 获取ipa文件进而获取APP图片资源. 不过还是有其他 ...

  6. bitmq集群高可用测试

    Rabbitmq集群高可用 RabbitMQ是用erlang开发的,集群非常方便,因为erlang天生就是一门分布式语言,但其本身并不支持负载均衡. Rabbit模式大概分为以下三种:单一模式.普通模 ...

  7. LITTLE-ENDIAN(小字节序、低字节序) BOM——Byte Order Mark 字节序标记 数据在内存中的存放顺序

    总结: 1. endian 字节存放次序 字节序,顾名思义字节的顺序,再多说两句就是大于一个字节类型的数据在内存中的存放顺序(一个字节的数据当然就无需谈顺序的问题了). 2. LITTLE-ENDIA ...

  8. ASM X86&&X64 Registers 对寄存器ESP和EBP的一些理解

    ESP EIP EBP : frame pointer(base address of stack) Calling Convention: 调用约定 为什么fun调用之后 esp -ebp = 20 ...

  9. Anaconda 虚拟环境安装及应用

    首先要安装Anaconda 下载网址:https://www.anaconda.com/distribution/#download-section      Miniconda下载网址:https: ...

  10. STLの应用

    QAQ因为绝望地发现好像这些应用都没有题目...所以就专门开了个随笔存题面qwq 谁的孙子最多 给定一棵树,其中1号节点是根节点,问哪一个节点的孙子节点最多,有多少个.(孙子节点,就是儿子节点的儿子节 ...