前端js中動(dòng)態(tài)添加的元素不能觸發(fā)綁定事件解決方法

2018-5-24    seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

問(wèn)題描述：在頁(yè)面選擇關(guān)鍵詞時(shí)，需要將關(guān)鍵詞元素綁定點(diǎn)擊事件使同一類(lèi)型的關(guān)鍵詞只有一個(gè)固定class，使其隨點(diǎn)擊更換，目的是為了讓這一類(lèi)型的關(guān)鍵詞的值可以由class獲取。在原本寫(xiě)死的關(guān)鍵詞上綁定的事件是可用的，但是換成動(dòng)態(tài)加載后發(fā)現(xiàn)只能適用于寫(xiě)死的情況。很無(wú)奈，在網(wǎng)上搜索一番后花了點(diǎn)時(shí)間終于解決了，下面奉上。  

參考文章：https://blog.csdn.net/qq_35129893/article/details/78363211?locationNum=2&fps=1

原本綁定事件如下：

[javascript] view plain copy
  1. //查詢條件class的加載和移除（不能綁定動(dòng)態(tài)加載的標(biāo)簽）  
  2. $('.value_list').children.click(function(){     
  3.     $(this).addClass('a-time').siblings().removeClass('a-time');  

針對(duì)的HTML元素如下：

[html] view plain copy
  1. <div class="value_list value_list1" style="width: 80%;" id="subject">  
  2.     <span class="mr36" onclick="selectTopic(0)" value="0">全部</span>  
  3.     <a href="javascript:;" onclick="selectTopic("6eac9783353d40bba49e6b253e73f285")" value="dayu" types="subject" class="a-time">dayu</a>  
  4.     <a href="javascript:;" onclick="selectTopic("f9cbaa888cf34a99b6c50bf393e1a859")" value="天下會(huì)" types="subject" class="">天下會(huì)</a>  
  5.     <a href="javascript:;" onclick="selectTopic("3f4aa8924c88466dafc63d52aa57e7a6")" value="大雨" types="subject">大雨</a>  
  6.     <a href="javascript:;" onclick="selectTopic("87259765e9174a3b9d97f00a461e90bd")" value="士大夫" types="subject" class="">士大夫</a>  
  7. </div>  

但是發(fā)現(xiàn)，原先的事件不能用于動(dòng)態(tài)加載的元素，如上面加載的，加載形式如下：

[javascript] view plain copy
  1. //獲取關(guān)鍵詞列表  
  2. function getlist(){  
  3.     $("#subject").html("");  
  4.     $.ajax({  
  5.         type: "POST",  
  6.         url:path+"/key/queryKeys.php",  
  7.         dataType : "json",  
  8.         success: function(result) {  
  9.             var data = result.data;  
  10.             console.log(data+" 888");  
  11.             if(data!=''){  
  12.                 var html='<span class="a-time mr36" onclick="selectTopic(0)" value="0">全部</span>';  
  13.                 for(var i=0;i<data.length;i++){//如果不加"則只能傳遞數(shù)字變量而不能傳遞帶有字母的變量，加上"則無(wú)影響  
  14.                 //  html+='<li class="fl"><i class="iconfont close" onclick="del("'+data[i].kw_id+'")"></i>'+data[i].kw_word+'</li>';  
  15.                     html+='<a href="javascript:;" onclick="selectTopic("'+data[i].kw_id+'")" value="'+data[i].kw_word+'" types="subject">'+data[i].kw_word+'</a>'  
  16.                 }                             
  17.                 $("#subject").html(html);  
  18.             }else{  
  19.                 alert("請(qǐng)先登陸！");   
  20.             }  
  21.         }  
  22.          });   
  23. }  

無(wú)奈，只能上網(wǎng)尋求萬(wàn)能的大神了。

基本上提供的解決方案就兩個(gè)，使用 

$('element').live('click',function(){})

或者 

$('父元素').on('click', '子元素', function(){})

我先是使用.live嘗試了下，發(fā)現(xiàn)gg，心灰意冷ing；本著試一試不要錢(qián)的心態(tài)又用.on試了下，結(jié)果令人驚喜啊！可以使用了，哎，這鬼玩意坑死人。

下面上針對(duì)我加載的界面元素寫(xiě)的綁定事件：

[javascript] view plain copy
  1. //查詢條件class的加載和移除（適用于動(dòng)態(tài)加載標(biāo)簽的情況--on事件需要jquery在1.6以上）  
  2. $('.value_list').on('click','a,span',function(){  
  3.     $(this).addClass('a-time').siblings().removeClass('a-time');  
  4. ;  

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至：

日歷

鏈接

個(gè)人資料

存檔