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