1. 程式人生 > >jquery定義之後的按鈕點選事件,會產生累計的情況

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("執行"); 
 });