在做項目中肯定會遇到一些，需要動態添加的元素，比如我做一個賬號充值消費記錄。用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個。節省的時間，資源，效率可想而知。
