jQuery动态追加HTML元素后绑定的click点击事件不生效如何解决？

问题根因 #

• 选择器语法错误：原代码中$("div#attachmentBadge.closeAttachment")的选择器没有空格，属于联合匹配规则，仅会匹配同时具备id="attachmentBadge"和class="closeAttachment"的div元素。而你的关闭按钮是该div的后代元素，需要使用后代选择器，改为div#attachmentBadge .closeAttachment（id和类名之间加空格）。
• 动态元素绑定失效：关闭按钮是通过append动态插入DOM的，直接调用click()绑定事件仅会作用于绑定执行时已经存在的DOM元素，后续新增的动态元素不会触发该事件。

正确绑定方法 #

使用jQuery事件委托机制，将事件绑定在页面初始化时就存在的父级元素上，通过事件冒泡触发匹配子元素的回调：

// 方案1：委托到document，适配所有场景
$(document).on('click', 'div#attachmentBadge .closeAttachment', function() {
    console.log('clicked')
    // 如需获取当前条目索引，可通过 $(this).attr('value') 读取
})

// 方案2：如果#attachmentBadge是页面初始就存在的静态元素，绑定到它身上性能更优
$('#attachmentBadge').on('click', '.closeAttachment', function() {
    console.log('clicked')
})

内容的提问来源于stack exchange，提问作者wizze mate