快捷導(dǎo)航

淺談jQuery綁定事件會(huì)疊加的解決方法和心得總結(jié)

更新時(shí)間：2016年10月26日 09:02:15 投稿：jingxian

下面小編就為大家?guī)?lái)一篇淺談jQuery綁定事件會(huì)疊加的解決方法和心得總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

關(guān)于jQuery的學(xué)習(xí)中我忽略了一個(gè)取消綁定事件.unbind()的使用，也不知道綁定事件會(huì)累加的情況，結(jié)果因?yàn)檫@個(gè)原因，讓我在項(xiàng)目上栽了坑。只能說(shuō)自己還太年輕，需要學(xué)習(xí)掌握的知識(shí)還有很多。

我遇到的問(wèn)題

我在項(xiàng)目中遇到的狀況，一個(gè)評(píng)價(jià)頁(yè)面，簡(jiǎn)單的來(lái)說(shuō)就是左右兩個(gè)表格，ajax分別動(dòng)態(tài)加載學(xué)生姓名學(xué)號(hào)信息和不同科目對(duì)學(xué)生評(píng)價(jià)內(nèi)容兩部分，兩邊表格我都每行寫(xiě)了checkbox并對(duì)table tbody tr綁定click事件執(zhí)行行選功能，起初我寫(xiě)的是靜態(tài)頁(yè)面html，行選功能完全沒(méi)有問(wèn)題，后來(lái)?yè)Q成jsp頁(yè)面，ajax動(dòng)態(tài)加載數(shù)據(jù)進(jìn)來(lái)后，問(wèn)題就來(lái)了，由于ajax異步請(qǐng)求，兩邊表格發(fā)送請(qǐng)求加載數(shù)據(jù)有先后，之前靜態(tài)頁(yè)面測(cè)試好的行選功能就出了問(wèn)題，每次刷新頁(yè)面，只有后加載的部分才可以行選，之前加載的部分行選失效。自己控制臺(tái)打印點(diǎn)擊的狀態(tài)console.log(chkBoxStatus);測(cè)試發(fā)現(xiàn)前加載的部分總是打印兩次false true，而后加載的部分只打印一次false或是true。

我之前的行選代碼段：

//行選功能 
  $("table tbody tr").click(function(event) {

  //遍歷tr下的checkbox元素
  var $check = $(this).find("input[type=checkbox]");

  //判斷非點(diǎn)擊checkbox本身
  if($check.length > 0 && event.target != $check[0]) { 
    var chkBoxStatus = $check.is("input:checked");
    console.log(chkBoxStatus);
    $check.prop("checked", !chkBoxStatus); 
  }

  });

起初我認(rèn)為我肯定是jQuery功能代碼不對(duì)，于是自己檢查了html里id,class，發(fā)現(xiàn)并沒(méi)有出錯(cuò)，于是我便一直在想為何控制臺(tái)會(huì)意外打印兩次，后面室友提示我說(shuō)，試試在執(zhí)行功能之前清除事件綁定，于是我便照做了用jquery 的.unbind("click")，清除所有table上的click事件。結(jié)果！結(jié)果竟然成功了！?。蛇叺谋砀駭?shù)據(jù)都可以正常進(jìn)行行選功能，雖然是完成了預(yù)期功能，但是我當(dāng)時(shí)不知道為什么要這樣去做清除事件。后面我突然想到原來(lái)是執(zhí)行了兩次click事件的結(jié)果，每次先加載的數(shù)據(jù)，加載完畢后就被綁定click事件一次，后加載的數(shù)據(jù)加載完畢后，之前先加載的數(shù)據(jù)再次被綁定一次click事件，所以也就是為什么先加載的數(shù)據(jù)行選失效，打印兩次false true ，而后加載的數(shù)據(jù)行選正常，打印一次。

下面是修改后的代碼：

//行選功能 
  $("table tbody tr").unbind("click");//清除table的所有click事件  
  $("table tbody tr").click(function(event) {

  //遍歷tr下的checkbox元素
  var $check = $(this).find("input[type=checkbox]");

  //判斷非點(diǎn)擊checkbox本身
  if($check.length > 0 && event.target != $check[0]) { 
    var chkBoxStatus = $check.is("input:checked");
    console.log(chkBoxStatus);
    $check.prop("checked", !chkBoxStatus); 
  }

  });

雖然問(wèn)題很小，但是也是學(xué)習(xí)，總之自己還是需要不斷努力，完善自己。博文只是對(duì)自己的總結(jié)

以上就是小編為大家?guī)?lái)的淺談jQuery綁定事件會(huì)疊加的解決方法和心得總結(jié)全部?jī)?nèi)容了，希望大家多多支持腳本之家~

您可能感興趣的文章: