<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

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

          2018-5-24    seo達人

          如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

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

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

          原本綁定事件如下:

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

          針對的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="天下會" types="subject" class="">天下會</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),原先的事件不能用于動態(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ù)字變量而不能傳遞帶有字母的變量,加上"則無影響  
          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("請先登陸!");   
          20.             }  
          21.         }  
          22.          });   
          23. }  

          無奈,只能上網(wǎng)尋求萬能的大神了。

          基本上提供的解決方案就兩個,使用

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

          或者

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

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

          下面上針對我加載的界面元素寫的綁定事件:

          [javascript] view plain copy
          1. //查詢條件class的加載和移除(適用于動態(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. ;  

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

          日歷

          鏈接

          個人資料

          藍藍設(shè)計的小編 http://www.sdgs6788.com

          存檔

          亚洲国产精品婷婷久久| 日韩一区二区三区视频久久| 伊人色综合久久天天人手人婷| 久久精品久久久久观看99水蜜桃| 色欲综合久久中文字幕网| 93精91精品国产综合久久香蕉 | 性高朝久久久久久久久久| 日产精品久久久久久久性色| 热re99久久精品国产99热| 久久久久久精品久久久久| 精品久久久久久国产三级| 久久亚洲精品成人av无码网站| 久久久久久一区国产精品| 国产美女久久久| 久久久久久久久无码精品亚洲日韩| 久久国产高清一区二区三区| 久久精品天天中文字幕人妻 | 日本亚洲色大成网站WWW久久| 香蕉久久一区二区不卡无毒影院| 精品久久久中文字幕人妻 | 国产精品免费久久久久久久久| 青草国产精品久久久久久| 97久久国产综合精品女不卡| 久久久久国产视频电影| 一本伊大人香蕉久久网手机| 精品久久久久久久无码| 久久久婷婷五月亚洲97号色| 一本久久a久久精品亚洲| 亚洲精品无码成人片久久| 久久成人小视频| 久久精品国产免费观看三人同眠| 日产久久强奸免费的看| 亚洲午夜福利精品久久| 欧美色综合久久久久久| 日韩欧美亚洲国产精品字幕久久久 | 无码国内精品久久综合88| 亚洲人成无码www久久久| 亚洲国产成人精品91久久久 | 久久精品国产亚洲av日韩| 久久国产精品无码一区二区三区| 久久超乳爆乳中文字幕|