欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

click事件的累加绑定

程序员文章站 2022-09-24 13:03:03
最近在工作上遇到一个点击事件累加的问题,为元素添加点击事件效果,但是总是效果失败,最后发现点击事件被执行了多次,上网查了一下,下边就是解决这个问题的几种思路 $("...

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

 $("#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("执行"); 
});

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