原生JavaScript中按钮事件监听器无法触发的问题求助

1. 选择器与初始化时机错误 #

• 你初始化heartsButtons时用了document.querySelectorAll('heart-buttons')，类选择器必须加.，正确写法是document.querySelectorAll('.heart-buttons')。
• 即便修正选择器，这行代码在页面加载时就执行，此时renderPosts还未生成动态按钮，heartsButtons会是空的元素集合，后续e.target === heartsButtons的判断完全不成立——单个点击元素不可能等于元素集合。

2. 事件判断逻辑错误 #

当前代码里的if(e.target === heartsButtons)逻辑完全错误，因为heartsButtons是多个元素的集合，而e.target是单个点击元素。应该改为检查点击目标是否包含heart-buttons类：

if(e.target.classList.contains('heart-buttons')){
    console.log('clicked')
}

3. 重复ID问题 #

代码中给帖子容器div和心形按钮都用了${post.id}作为ID，DOM中ID必须唯一，这会导致潜在的DOM操作混乱。建议修改按钮的ID为：

<button class="heart-buttons" id="heart-btn-${post.id}" data-post-id="${post.id}">❤</button>

同时把data属性改为语义化的data-post-id，方便后续获取对应帖子ID。

完整修复后的核心代码片段 #

// 移除无用的heartsButtons变量，事件委托不需要提前选择元素

document.addEventListener('click', (e)=>{
    if(e.target === publishButton){
        let newEndorsement = [{    
            'id': uuidv4(),
            'reciever': inputFieldTo.value,
            'sender': inputFieldFrom.value,
            'message': inputField.value,
            'isLiked': false,
            'hearts': 0,
        }]
        renderPosts(newEndorsement)
        // 发布后清空输入框，提升体验
        inputField.value = ''
        inputFieldFrom.value = ''
        inputFieldTo.value = ''
    }

    // 修正心形按钮的点击判断
    if(e.target.classList.contains('heart-buttons')){
        console.log('clicked')
        // 通过dataset获取对应帖子ID，用于后续点赞逻辑
        const postId = e.target.dataset.postId
        // 示例：更新点赞数
        const likesSpan = e.target.nextElementSibling
        likesSpan.textContent = parseInt(likesSpan.textContent) + 1
    }
})

// 修正renderPosts中的按钮ID和data属性
function renderPosts(data){
    data.forEach((post)=>{
        endorsementsContainer.innerHTML += `
        <div class="endorsment-post" id="post-${post.id}">
            <h4>To ${post.reciever}</h4>
            <p>${post.message}</p>
            <div class="endorsement-post-footer">                       
                <h4>${post.sender}</h4>
                <div class="likes-container"> 
                    <button class="heart-buttons" id="heart-btn-${post.id}" data-post-id="${post.id}">❤</button>
                    <span class="likes-span">${post.hearts}</span>
                </div>
            </div>
        </div>`
    })
}

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