事件發(fā)生時是會發(fā)生以上的步驟/

而事件委托是 委托給他的父級來觸發(fā)來達到的效果/
??！如果好多個動態(tài)元素都用同一個父元素來做事件代理，那么后面的事件會覆蓋掉前面父元素代理的事件。

動態(tài)生成的元素要通過事件委托來處理，官方建議用on把事件委托在body上。 要綁定在 class 上的話，你需要在動態(tài)增加后重寫綁定。

原因嘛，似乎是因為實際上是個數(shù)組，在你沒有動態(tài)生成的元素之前，該數(shù)組實際上在執(zhí)行該條JS語句的時候就已經(jīng)完成了。（個人理解。）

只有第一個和最后一個有用, 中間那個其實并沒有什么用.
用 on來添加事件就是事件委托, 意思就是 :

點擊事件綁定在body 和 delete-monitor1上, 等你點擊的時候去判斷你點擊的元素 id === button 的話, 就執(zhí)行下面的函數(shù). 所以delete-monitor1是不能動態(tài)加載的, 但是他的子元素可以, 而body肯定是在的. 所以能成功.

但是中間那種, 我一進頁面, 先去找 delete-monitor的子元素 button, 給每個button綁定事件. 但是你的 button是動態(tài)加載的,剛進頁面的時候是不存在的, 所以沒有綁定成功.

我猜你的 delete-monitor button 是 delete-monitor1 的子元素, 所以第一個事件綁定影響到了第二個.

委托就像送快遞。你可能不在家，委托門衛(wèi)接收，再給你。 不然快遞到時你不在家怎么辦？
比較形象，但是不太對.
不知道你明白對象不，事件綁定在對象上，按鈕就是一個對象，對象被刪除又重新創(chuàng)建，雖然長得一樣，但是綁定事件沒了。

對于jQuery1.7版本之前，動態(tài)添加的元素綁定事件可以用 live，之后版本，使用 on來綁定，直接給button綁定click事件是不起作用的。

還可以使用addEventListener()來實現(xiàn)事件委托，達到對動態(tài)創(chuàng)建的元素綁定事件的效果

是時候展現(xiàn)一波真正的技術(shù)了：委托

$(document).click(function(e){
    e=e||window.event;
    var target=e.target||e.srcElement;
    //這個target就是鼠標(biāo)點擊document點擊后拿到的節(jié)點，$(target)
    console.log(target,target.nodeName);
});

//請把這一段代碼 放入控制臺 執(zhí)行，在頁面上點擊任意節(jié)點，看輸出的信息，你應(yīng)該就明白了。