最近做项目为一个添加按钮绑定点击事件&＃xff0c;很简单的一个事情&＃xff0c;于是我按照通常做法找到元素&＃xff0c;使用jquery的on()方法为元素绑定了点击事件&＃xff0c;点击同时发送请求。完成后看效果&＃xff0c;第一次点击没有问题。再一次点击后发现发送了两次请求&＃xff0c;后面再点击发现请求的数量越来越多。这时我初步判断可能是元素有多个或是多次调用了方法&＃xff0c;但找了一遍&＃xff0c;发现只为一个元素绑定了事件&＃xff0c;且只调用了一次。后来通过查资料才知道是点击事件被累加绑定了&＃xff01;那到底什么是累加绑定呢&＃xff1f;什么时候会发生累加绑定&＃xff1f;累加绑定后该如何解决呢&＃xff1f;下面我就通过这三个问题来说一下。
1 $("#adsCollection_tb .contentDel").on("click",function(){2 $(this).each(function(){3 var obj_address_name &＃61; $(this).parent().parent().find(".obj_address_name").html();4 var jsonDel &＃61; {5 "head": {6 "module": "object",7 "function": "del_obj"8 },9 "body":[
10 {
11 "name": obj_address_name
12 }
13 ]
14 }
15 alert("确定要删除这一条吗&＃xff1f;")
16 addrGroup.Ajax(jsonDel);
17
18 });
19 });
在页面中为一个元素绑定事件&＃xff0c;事件执行后页面未刷新且元素还在&＃xff0c;然后你再次点击&＃xff0c;元素又被绑定个一次点击事件&＃xff0c;这样第二次点击就会执行两次&＃xff0c;以此类推。
如何解决累加绑定&＃xff1a;第一种方法是元素点击后删除&＃xff0c;然后再动态创建一个元素&＃xff0c;再添加点击事件。显然这个方式很麻烦。
第二中方法是使用jquery的one()方法&＃xff0c;为元素绑定一个一次性的事件处理函数&＃xff0c;这个事件处理函数只会被执行一次。
1 $("#adsCollection_tb").one("click",function(){
2 alert("执行");
3 })
第三种方法是在每次绑定点击事件前先解除之前的事件绑定&＃xff0c;再为元素绑定事件&＃xff0c;类似于先清空&＃xff0c;在做操作一样。但你使用bind()方法绑定时&＃xff0c;可以用unbind()方法解除绑定。通常我们跟愿意用on()方法绑定事件&＃xff0c;因为bind()方法已经不被推荐&＃xff0c;那么那么就用off()方法解除事件绑定。
1 $("#adsCollection_tb").unbind("click").bind("click",function(){
2 alert("执行");
3 });
4 $("#adsCollection_tb").off("click").on("click",function(){
5 alert("执行");
6 })&＃xff1b;
京公网安备 11010802041100号