click事件的累加綁定,綁定一次點擊事件,執行多次


  我的github(PS:希望star):https://github.com/thWinterSun/v-admin

  最近做項目為一個添加按鈕綁定點擊事件,很簡單的一個事情,於是我按照通常做法找到元素,使用jquery的on()方法為元素綁定了點擊事件,點擊同時發送請求。完成后看效果,第一次點擊沒有問題。再一次點擊后發現發送了兩次請求,后面再點擊發現請求的數量越來越多。這時我初步判斷可能是元素有多個或是多次調用了方法,但找了一遍,發現只為一個元素綁定了事件,且只調用了一次。后來通過查資料才知道是點擊事件被累加綁定了!那到底什么是累加綁定呢?什么時候會發生累加綁定?累加綁定后該如何解決呢?下面我就通過這三個問題來說一下。

  

 1 $("#adsCollection_tb .contentDel").on("click",function(){
 2   $(this).each(function(){
 3    var obj_address_name = $(this).parent().parent().find(".obj_address_name").html();
 4       var jsonDel = {
 5           "head": {
 6             "module": "object",
 7             "function": "del_obj"
 8            },
 9            "body":[
10                   {
11              "name": obj_address_name
12                    }
13                    ]
14             }
15         alert("確定要刪除這一條嗎?")
16         addrGroup.Ajax(jsonDel);
17                         
18    });
19 });

 

  在頁面中為一個元素綁定事件,事件執行后頁面未刷新且元素還在,然后你再次點擊,元素又被綁定個一次點擊事件,這樣第二次點擊就會執行兩次,以此類推。

  如何解決累加綁定:第一種方法是元素點擊后刪除,然后再動態創建一個元素,再添加點擊事件。顯然這個方式很麻煩。

  第二中方法是使用jquery的one()方法,為元素綁定一個一次性的事件處理函數,這個事件處理函數只會被執行一次。

  

1 $("#adsCollection_tb").one("click",function(){
2    alert("執行"); 
3 })

 

  第三種方法是在每次綁定點擊事件前先解除之前的事件綁定,再為元素綁定事件,類似於先清空,在做操作一樣。但你使用bind()方法綁定時,可以用unbind()方法解除綁定。通常我們跟願意用on()方法綁定事件,因為bind()方法已經不被推薦,那么那么就用off()方法解除事件綁定。

1 $("#adsCollection_tb").unbind("click").bind("click",function(){
2     alert("執行"); 
3  });
4  $("#adsCollection_tb").off("click").on("click",function(){
5     alert("執行"); 
6 });

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM