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

在做项目中肯定会遇到一些，需要动态添加的元素，比如我做一个账号充值消费记录。用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个。节省的时间，资源，效率可想而知。