97精品久久天干天天天按摩,久久久精品日本一区二区三区,免费精品久久久久久中文字幕

<center id="wecga"></center>

前端js中動態添加的元素不能觸發綁定事件解決方法

2018-5-24 seo達人

如果您想訂閱本博客內容，每天自動發到您的郵箱中，請點這里

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

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

原本綁定事件如下：

[javascript] view plain copy

//查詢條件class的加載和移除（不能綁定動態加載的標簽）

$('.value_list').children.click(function(){

    $(this).addClass('a-time').siblings().removeClass('a-time');

針對的HTML元素如下：

[html] view plain copy

<div class="value_list value_list1" style="width: 80%;" id="subject">

    <span class="mr36" onclick="selectTopic(0)" value="0">全部</span>

    <a href="javascript:;" onclick="selectTopic("6eac9783353d40bba49e6b253e73f285")" value="dayu" types="subject" class="a-time">dayu</a>

    <a href="javascript:;" onclick="selectTopic("f9cbaa888cf34a99b6c50bf393e1a859")" value="天下會" types="subject" class="">天下會</a>

    <a href="javascript:;" onclick="selectTopic("3f4aa8924c88466dafc63d52aa57e7a6")" value="大雨" types="subject">大雨</a>

    <a href="javascript:;" onclick="selectTopic("87259765e9174a3b9d97f00a461e90bd")" value="士大夫" types="subject" class="">士大夫</a>

</div>

但是發現，原先的事件不能用于動態加載的元素，如上面加載的，加載形式如下：

[javascript] view plain copy

//獲取關鍵詞列表

function getlist(){

    $("#subject").html("");

    $.ajax({

        type: "POST",

        url:path+"/key/queryKeys.php",

        dataType : "json",

        success: function(result) {

            var data = result.data;

            console.log(data+" 888");

            if(data!=''){

                var html='<span class="a-time mr36" onclick="selectTopic(0)" value="0">全部</span>';

                for(var i=0;i<data.length;i++){//如果不加"則只能傳遞數字變量而不能傳遞帶有字母的變量，加上"則無影響

                //  html+='<li class="fl"><i class="iconfont close" onclick="del("'+data[i].kw_id+'")"></i>'+data[i].kw_word+'</li>';

                    html+='<a href="javascript:;" onclick="selectTopic("'+data[i].kw_id+'")" value="'+data[i].kw_word+'" types="subject">'+data[i].kw_word+'</a>'

                }

                $("#subject").html(html);

            }else{

                alert("請先登陸！");

            }

        }

         });

}

無奈，只能上網尋求萬能的大神了。

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

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

或者

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

我先是使用.live嘗試了下，發現gg，心灰意冷ing；本著試一試不要錢的心態又用.on試了下，結果令人驚喜?。】梢允褂昧耍?，這鬼玩意坑死人。

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

[javascript] view plain copy

//查詢條件class的加載和移除（適用于動態加載標簽的情況--on事件需要jquery在1.6以上）

$('.value_list').on('click','a,span',function(){

    $(this).addClass('a-time').siblings().removeClass('a-time');

;

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

« 卡片式UI設計欣賞懶加載封裝實現 »

日歷

鏈接

個人資料

藍藍設計的小編 http://www.sdgs6788.com

存檔

<center id="uimcs"></center><li id="uimcs"></li>

前端js中動態添加的元素不能觸發綁定事件解決方法

分類

日歷

鏈接

個人資料

存檔