JS点击事件仅首次生效问题：切换心形图标失效求助

问题原因 #

你给页面初始化时的<i>元素绑定了点击事件，但每次触发点击后，通过innerHTML直接替换了.add-favorite内部的整个<i>标签——新生成的<i>元素没有被绑定任何点击事件，所以首次点击后，后续操作就失效了。

具体流程：

• 页面加载完成，原始<i class="far fa-heart"></i>存在，你给它绑定了点击事件。
• 第一次点击触发事件，执行innerHTML = '<i class="fas fa-heart"></i>'，原始<i>被删除，新的<i>插入DOM，但这个新元素没有绑定点击事件，再次点击自然无反应。

修复方案 #

推荐两种简单可行的修复方式：

方式1：使用事件委托（绑定到父元素） #

把点击事件绑定到.add-favorite父元素上，不管内部<i>如何替换，点击事件都会被触发：

for (let i = 0; i < announcements.length; i++) {
    announcements[i].querySelector(".add-favorite").addEventListener('click', function(e){
        const heartIcon = this.querySelector("i");
        if (heartIcon.classList.contains("fas")) {
            heartIcon.classList.replace("fas", "far");
        } else {
            heartIcon.classList.replace("far", "fas");
        }
    })
}

方式2：仅切换class（最优方案） #

不要替换整个<i>元素，直接修改它的class属性，这样原始元素保留，事件绑定不会失效：

for (let i = 0; i < announcements.length; i++) {
    announcements[i].querySelector(".add-favorite i").addEventListener('click', function(e){
        // 切换fas和far类
        this.classList.toggle("fas");
        this.classList.toggle("far");
    })
}

也可以用classList.replace简化逻辑：

this.classList.replace(
    this.classList.contains("fas") ? "fas" : "far",
    this.classList.contains("fas") ? "far" : "fas"
);

补充说明 #

你删除if-else逻辑后点击正常，是因为删除后没有替换<i>元素，原始绑定了事件的元素还在DOM中，所以点击能触发，但也失去了切换图标的功能。

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