淺談jQuery綁定事件會疊加的解決方法和心得總結

關於jQuery的學習中我忽略了一個取消綁定事件.unbind()的使用，也不知道綁定事件會累加的情況，結果因為這個原因，讓我在專案上栽了坑。只能說自己還太年輕，需要學習掌握的知識還有很多。

我遇到的問題

我在專案中遇到的狀況，一個評價頁面，簡單的來說就是左右兩個表格，ajax分別動態加載學生姓名學號資訊和不同科目對學生評價內容兩部分，兩邊表格我都每行寫了checkbox並對table tbody tr綁定click事件執行行選功能，起初我寫的是靜態頁面html，行選功能完全沒有問題，後來換成jsp頁面，ajax動態加載數據進來後，問題就來了，由於ajax非同步請求，兩邊表格發送請求加載資料有先後，之前靜態頁面測試好的行選功能就出了問題，每次刷新頁面，只有後加載的部分才可以行選，之前載入的部分行選失效。自己控制台打印點擊的狀態console.log(chkBoxStatus);測試發現前加載的部分總是打印兩次false true，而後加載的部分只打印一次false或是true。

我之前的行選程式碼段：

//行选功能
  $("table tbody tr").click(function(event) {
 
  //遍历tr下的checkbox元素
  var $check = $(this).find("input[type=checkbox]");
 
  //判断非点击checkbox本身
  if($check.length > 0 && event.target != $check[0]) {
    var chkBoxStatus = $check.is("input:checked");
    console.log(chkBoxStatus);
    $check.prop("checked", !chkBoxStatus);
  }
 
  });

   

起初我認為我肯定是jQuery功能碼不對，於是自己檢查了html裡id,class，發現並沒有出錯，於是我一直在想為什麼控制台會意外列印兩次，後面室友提示我說，試試在執行功能之前清除事件綁定，於是我便照做了用jquery 的.unbind("click")，清除所有table上的click事件。結果！結果竟然成功了！ ！ ！兩邊的表格資料都可以正常進行行選功能，雖然是完成了預期功能，但是我當時不知道為什麼要這樣去做清除事件。後面我突然想到原來是執行了兩次click事件的結果，每次先加載的數據，加載完畢後就被綁定click事件一次，後加載的數據加載完畢後，之前先加載的數據再次被綁定一次click事件，所以也就是為什麼先載入的資料行選失效，列印兩次false true ， 而後載入的資料行選正常，列印一次。

下面是修改後的程式碼：

//行选功能
  $("table tbody tr").unbind("click");//清除table的所有click事件 
  $("table tbody tr").click(function(event) {
 
  //遍历tr下的checkbox元素
  var $check = $(this).find("input[type=checkbox]");
 
  //判断非点击checkbox本身
  if($check.length > 0 && event.target != $check[0]) {
    var chkBoxStatus = $check.is("input:checked");
    console.log(chkBoxStatus);
    $check.prop("checked", !chkBoxStatus);
  }
 
  });

   

雖然問題很小，但是也是學習，總之自己還是需要不斷努力，完善自己。博文只是對自己的總結