对于动态添加的元素绑定事件无效的看法
程序员文章站
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个。节省的时间,资源,效率可想而知。