今天写项目时偶然发现,我用jquery动态追加创建的元素 点击事件没有被触发,
查阅资料后才知道需将单击事件绑定在其父级标签上。
例如:
HTML:
<button>还想吃</button>
<div class =“swrap”>
<div class =“lotteryTags”>海鲜火锅</ div>
<div class =“lotteryTags”>鸡公煲</ div>
<div class =“lotteryTags”>重庆小面</ div>
<div class =“lotteryTags”>烧烤</ div>
</ DIV>
JS:
$("button").click(function(){
$(".swrap").append("<div class='lotteryTags'>再来一份</div>")
})
$(".lotteryTags").click(function(){
alert("还想吃")
})
此时,当你点击再来一份时会发现没有任何反应,这时就需要将点击事件绑定在其父级元素上,如下:
$('.swrap').on('click', 'lotteryTags',function(){
alert("终于吃饱了")
});
这样,问题就解决了,可以去吃饭饭啦!