JS动态创建元素添加事件监听失败，求原因解析

事件委托方法失效原因 #

你写的事件委托代码存在两个关键错误：

1. 类名属性调用错误：DOM元素的类名属性是className，而非class（class是JavaScript保留字，不能直接作为元素属性名使用）。
2. 未处理事件冒泡的目标偏差：如果按钮内部包含子元素（比如图标、文本），event.target会指向这些子元素而非按钮本身，导致类名判断失效。

修正后的事件委托代码示例：

document.body.addEventListener('click', function (event) {
    // 用closest匹配最近的目标按钮，兼容子元素点击场景
    const targetBtn = event.target.closest('.deleteCommentButton');
    if (targetBtn) {
        deleteComment();
        // 若需传递按钮上下文，可改为deleteComment(targetBtn)
    }
})

直接绑定方法失效原因 #

document.querySelectorAll()返回的是NodeList（节点列表），它不是单个DOM元素，本身没有addEventListener方法。必须遍历这个列表，给每个元素单独绑定事件：

修正后的直接绑定代码示例：

const addEventTobutton = () => {
    // 遍历删除按钮列表，逐个绑定点击事件
    document.querySelectorAll('.deleteCommentButton').forEach(btn => {
        btn.addEventListener('click', deleteComment);
    });
    // 遍历修改按钮列表，逐个绑定点击事件
    document.querySelectorAll('.modifyCommentButton').forEach(btn => {
        btn.addEventListener('click', modifyComment);
    });
}

额外提示：如果按钮是动态生成（比如通过AJAX加载、后续渲染），直接绑定方法需要在按钮生成后再调用addEventTobutton；而事件委托方法天然支持动态元素，无需额外处理。

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