問題描述：在頁面選擇關(guān)鍵詞時，需要將關(guān)鍵詞元素綁定點(diǎn)擊事件使同一類型的關(guān)鍵詞只有一個固定class，使其隨點(diǎn)擊更換，目的是為了讓這一類型的關(guān)鍵詞的值可以由class獲取。在原本寫死的關(guān)鍵詞上綁定的事件是可用的，但是換成動態(tài)加載后發(fā)現(xiàn)只能適用于寫死的情況。很無奈，在網(wǎng)上搜索一番后花了點(diǎn)時間終于解決了，下面奉上。
參考文章：https://blog.csdn.net/qq_35129893/article/details/78363211?locationNum=2&fps=1
原本綁定事件如下：
-
-
$('.value_list').children.click(function(){
-
$(this).addClass('a-time').siblings().removeClass('a-time');
針對的HTML元素如下：
-
<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>
但是發(fā)現(xiàn)，原先的事件不能用于動態(tài)加載的元素，如上面加載的，加載形式如下：
-
-
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+='<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("請先登陸！");
-
}
-
}
-
});
-
}
無奈，只能上網(wǎng)尋求萬能的大神了。
基本上提供的解決方案就兩個，使用
$('element').live('click',function(){})
或者
$('父元素').on('click', '子元素', function(){})
我先是使用.live嘗試了下，發(fā)現(xiàn)gg，心灰意冷ing；本著試一試不要錢的心態(tài)又用.on試了下，結(jié)果令人驚喜啊！可以使用了，哎，這鬼玩意坑死人。
下面上針對我加載的界面元素寫的綁定事件：
-
-
$('.value_list').on('click','a,span',function(){
-
$(this).addClass('a-time').siblings().removeClass('a-time');
-
;
-
