本文实例分析了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();
});

 

 

 

相关文章:

  • 2022-12-23
  • 2021-11-15
  • 2021-07-24
  • 2022-12-23
  • 2021-08-23
  • 2018-02-04
  • 2021-10-17
猜你喜欢
  • 2022-01-09
  • 2021-12-11
  • 2022-12-23
  • 2021-07-13
相关资源
相似解决方案