JS——按钮点击事件累加注册问题

最近在工作上遇到一个点击事件累加的问题，为元素添加点击事件效果，但是总是效果失败，最后发现点击事件被执行了多次，上网查了一下，下边就是解决这个问题的几种思路

案列引自 踮起脚尖眺望6

 $("#adsCollection_tb .contentDel").on("click",function(){ $(this).each(function(){ var obj_address_name = $(this).parent().parent().find(".obj_address_name").html(); var jsonDel = { "head": { 　　"module": "object", 　　 "function": "del_obj" }, "body":[ { 　　 "name": obj_address_name } ] } alert("确定要删除这一条吗？"); addrGroup.Ajax(jsonDel); 　　 }); }); 

在页面中为一个元素绑定事件，事件执行后页面未刷新且元素还在，然后你再次点击，元素又被绑定个一次点击事件，这样第二次点击就会执行两次，以此类推。如何解决累加绑定？

第一种方法

元素点击后删除，然后再动态创建一个元素，再添加点击事件。显然这个方式很麻烦。

第二种方法

使用jquery的one()方法，为元素绑定一个一次性的事件处理函数，这个事件处理函数只会被执行一次。

$("#adsCollection_tb").one("click",function(){ alert("执行"); }) 

第三种方法

在每次绑定点击事件前先解除之前的事件绑定，再为元素绑定事件，类似于先清空，在做操作一样。但你使用bind()方法绑定时，可以用unbind()方法解除绑定。通常我们跟愿意用on()方法绑定事件，因为bind()方法已经不被推荐，那么那么就用off()方法解除事件绑定。

$("#adsCollection_tb").unbind("click").bind("click",function(){ alert("执行"); }); $("#adsCollection_tb").off("click").on("click",function(){ alert("执行"); })； 

本人通过这些方法解决了这个问题，希望可以帮到遇到同样问题的人

作者：前端很忙
链接：https://www.jianshu.com/p/22568af3a611
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。