欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

对于动态添加的元素绑定事件无效的看法

程序员文章站 2022-04-24 18:48:41
...

在做项目中肯定会遇到一些,需要动态添加的元素,比如我做一个账号充值消费记录。用table实现的,每一条记录都是动态查询添加的。
也就是每一个<tr><td>消费时间</td><td>消费金额</td><td class="clickme">查看详情</td></tr>,这些信息通过ajax访问服务器查询出来然后添加到table的tbody中(这只是一个简单的比喻)。
如果普通的绑定click事件是没用的。

先直接上办法,再说区别
事件委托法:

给父元素添加事件,用event对象来判断类名点击的是那个元素
$("table").click(function(e){
	console.log(e.target.className);//e.target是被触发的目标元素节点
        if(e.target.className==="clickme"){
					console.log("没错是我");//这里面就可以写逻辑处理
				} 
}) 

还有一种无意发现的

办法就是把对于未来元素的操作也就是事件写在ajax里
$.ajax({
				type:"post",
				url:"#",
				async:true,
				data,
				datatype:"json",
				success:function(){
					let str=$('<tr><td></td><td></td><td class="clickme"></td></tr>');
					$("table tbody").append(str);
					$(".clickme").click(function(){
						console.log("没错是我");
					})
				},
				error:function(){
					
				}
			});
这样也可以达到目的,虽然感觉很方便,但是请看下去。

之前因为方便的原因没管那么多,而且也都能达到同样的效果。但不明白其中的差别。
偶然跟大佬聊了聊这个问题,才明白其中的差别。

一个功能有N种实现的办法,但是我们开发人员要从中挑选效率最快的,代码最简洁的,代码执行速度最快的方法。

这两个方法对比起来事件委托完胜,因为浏览器只需要监听一个父元素的click事件。

而把click事件写在ajax里面就有一个问题如果这个用户有100条消费记录,当然我们肯定会用分页来显示,我只是打个性能对比的比方,如果我们要一次性添加进去,那么浏览器会为这100个元素监听click事件,为100个元素监听click事件对比监听一个元素的click事件,或者1000个,10000个。节省的时间,资源,效率可想而知。