前端js中动态添加的元素不能触发绑定事件解决方法

问题描述:在页面选择关键词时,需要将关键词元素绑定点击事件使同一类型的关键词只有一个固定class,使其随点击更换,目的是为了让这一类型的关键词的值可以由class获取。在原本写死的关键词上绑定的事件是可用的,但是换成动态加载后发现只能适用于写死的情况。很无奈,在网上搜索一番后花了点时间终于解决了,下面奉上。 

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

原本绑定事件如下:

   //查询条件class的加载和移除(不能绑定动态加载的标签)
   $('.value_list').children.click(function(){   
	  	$(this).addClass('a-time').siblings().removeClass('a-time');
	})

针对的HTML元素如下:

    全部     dayu     天下会     大雨     士大夫

但是发现,原先的事件不能用于动态加载的元素,如上面加载的,加载形式如下:

//获取关键词列表
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='全部';
	        	for(var i=0;i'+data[i].kw_word+'';
	        		html+=''+data[i].kw_word+''
	        	}				        	
	        	$("#subject").html(html);
        	}else{
        		alert("请先登陆!");	
        	}
        }
		 }); 
}

无奈,只能上网寻求万能的大神了。

基本上提供的解决方案就两个,使用

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

或者

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

我先是使用.live尝试了下,发现gg,心灰意冷ing;本着试一试不要钱的心态又用.on试了下,结果令人惊喜啊!可以使用了,哎,这鬼玩意坑死人。

下面上针对我加载的界面元素写的绑定事件:

   //查询条件class的加载和移除(适用于动态加载标签的情况--on事件需要jquery在1.6以上)
   $('.value_list').on('click','a,span',function(){
	  	$(this).addClass('a-time').siblings().removeClass('a-time');
	});

希望能对有同样问题的同学有一点帮助,不谢!

ps:参考文章中有对两种方法需要的版本解析,不清楚的可以去看下,反正看看不要钱!










你可能感兴趣的:(问题汇总)