jquery定义之后的按钮点击事件,会产生累计的情况

使用jquery的on()方法为元素绑定了点击事件,点击同时发送请求。完成后看效果,第一次点击没有问题。再一次点击后发现发送了两次请求,后面再点击发现请求的数量越来越多。当排查之后,发现只有一个元素绑定了事件,而且只调用了一次之后,得出最有可能的一种情况,就是点击事件被累加绑定了。

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值