今天做項(xiàng)目用了append向HTML里面添加結(jié)構(gòu)代碼，代碼添加之后浅辙，單擊事件就沒反應(yīng)了记舆。搞得我一臉懵逼呼巴，調(diào)了代碼很久實(shí)在不行，我百度了一下才發(fā)現(xiàn)厚满，append添加的節(jié)點(diǎn)單擊事件是不會生效的碧磅。
原因：
原來append中的節(jié)點(diǎn)是在整個(gè)文檔加載后才添加的鲸郊，頁面并不會為未來的元素初始化添加點(diǎn)擊事件，所以使用這種方式動態(tài)添加的節(jié)點(diǎn)中的點(diǎn)擊事件不會生效四濒。
解決方法：
于是我只好改用事件代理來完成這次我的項(xiàng)目职辨，把這次經(jīng)歷發(fā)在上面存一下檔了拨匆，希望下次能記住。
HTML代碼：
<main class="container" style="margin-top: 50px;margin-bottom: 50px">
<div class="row content" id="content">
</div>
</main>
append的代碼：我把下面這段代碼骨饿，加在content里面
$('#content').append(`
<div class="col-md-6">
<img src="img/cart.png" class="addcart">
</div>
<div class="col-md-6">
<img src="img/buy.png" class="buy">
</div>
`);
最終效果：
效果圖
事件代理：
思路：因?yàn)樽铋_始他們共同的父級content是在HTML結(jié)構(gòu)中的，所以將兩個(gè)單擊事件代理給content黎侈，通過單擊獲得的class名來判斷點(diǎn)擊的是哪一個(gè)對象峻汉，再進(jìn)行具體操作
$('#content').on('click',function (e) {
var target=e.target||e.srcElement;//獲取當(dāng)前點(diǎn)擊的對象
var cls=target.className;//獲取當(dāng)前點(diǎn)擊對象的class名
if(cls==='addcart'){//如果點(diǎn)擊的是加入購物車
console.log('addcart')
}else if (cls==='buy') {//如果點(diǎn)擊的是立即購買
console.log('buy')
}
});
