如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里
问题描述:在页面选择关键词时,需要将关键词元素绑定点击事件使同一类型的关键词只有一个固定class,使其随点击更换,目的是为了让这一类型的关键词的值可以由class获取。在原本写死的关键词上绑定的事件是可用的,但是换成动态加载后发现只能适用于写死的情况。很无奈,在网上搜索一番后花了点时间终于解决了,下面奉上。
参考文章: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>
但是发现,原先的事件不能用于动态加载的元素,如上面加载的,加载形式如下:
-
-
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("请先登陆!");
-
}
-
}
-
});
-
}
无奈,只能上网寻求万能的大神了。
基本上提供的解决方案就两个,使用
$('element').live('click',function(){})
或者
$('父元素').on('click', '子元素', function(){})
我先是使用.live尝试了下,发现gg,心灰意冷ing;本着试一试不要钱的心态又用.on试了下,结果令人惊喜啊!可以使用了,哎,这鬼玩意坑死人。
下面上针对我加载的界面元素写的绑定事件:
-
-
$('.value_list').on('click','a,span',function(){
-
$(this).addClass('a-time').siblings().removeClass('a-time');
-
;
-
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务