动态添加元素后img的src属性切换失效问题求助

问题根源 #

你的代码存在两个核心问题：

1. 重复绑定事件：每次调用updateCheckButtons()时，都会给已存在的.uncheck元素重复添加点击监听器。点击这类元素时，会触发多次切换逻辑——比如执行两次切换后又回到原状态，看起来像是没有切换效果。
2. 新元素绑定矛盾：如果新增元素后不调用updateCheckButtons()，新元素没有点击事件；但调用后又会导致旧元素重复绑定，陷入两难。

解决方案 #

方案1：事件委托（推荐，一劳永逸）

利用事件冒泡特性，把监听器绑定到所有.uncheck元素的共同父容器上。不管是现有元素还是后续新增的元素，都能自动触发切换逻辑，无需重复调用绑定函数：

// 替换为你实际的父容器选择器，比如id为check-list的元素
document.getElementById("check-list").addEventListener("click", function(e) {
    // 确认点击的是目标元素
    if (e.target.classList.contains("uncheck")) {
        const chk = e.target;
        const src = chk.getAttribute("src");
        if (src.endsWith("unchecked.png")) {
            chk.setAttribute("src", "images/checked.png");
        } else {
            chk.setAttribute("src", "images/unchecked.png");
        }
    }
});

方案2：避免重复绑定（兼容旧逻辑）

如果必须保留原函数结构，可将切换逻辑抽成独立函数，绑定前先移除旧事件：

function toggleCheckState(chk) {
    const src = chk.getAttribute("src");
    if (src.endsWith("unchecked.png")) {
        chk.setAttribute("src", "images/checked.png");
    } else {
        chk.setAttribute("src", "images/unchecked.png");
    }
}

function updateCheckButtons() {
    const checkButtons = document.querySelectorAll(".uncheck");
    checkButtons.forEach(chk => {
        // 先移除旧事件，再绑定新事件
        chk.removeEventListener("click", () => toggleCheckState(chk));
        chk.addEventListener("click", () => toggleCheckState(chk));
    });
}

额外排查点 #

• 确认新增元素是否正确添加了.uncheck类名，没有类名的话querySelectorAll无法匹配，自然无法绑定事件。
• 检查src属性的实际值：如果是完整URL（如https://xxx.com/unchecked.png），endsWith("unchecked.png")依然有效，但如果路径拼写错误会直接导致切换失败。

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