JavaScript onclick事件仅触发一次问题求助

问题根源 #

每次点击按钮后，你通过innerHTML重写了整个#main容器的内容——第一次绑定点击事件的按钮被完全移除，新生成的按钮没有绑定任何点击事件，所以后续点击毫无反应。

解决方案 #

方案1：仅更新需要变化的内容（推荐）

不需要重写整个容器，只修改显示数字的<p>标签内容，这样按钮不会被销毁，绑定的点击事件会一直有效：

import './style.css';

let x = 0;

// 初始化DOM结构，仅执行一次
document.querySelector('#main').innerHTML = `
    <button id="o">Click Me</button>
    <p id="count">${x}</p>
`;

document.querySelector("#o").onclick = function() {
    x++;
    console.log(x);
    // 只更新数字显示，不触碰按钮元素
    document.querySelector('#count').textContent = x;
};

方案2：重写DOM后重新绑定事件

如果必须重写整个容器，那每次更新DOM后都要给新生成的按钮重新绑定点击事件：

import './style.css';

let x = 0;

// 封装DOM更新逻辑
function updateClickerUI() {
    document.querySelector('#main').innerHTML = `
        <button id="o">Click Me</button>
        <p>${x}</p>
    `;
    // 每次更新后给新按钮绑定事件
    document.querySelector("#o").onclick = handleButtonClick;
}

// 独立的点击处理函数
function handleButtonClick() {
    x++;
    console.log(x);
    updateClickerUI();
}

// 初始化调用
updateClickerUI();

方案3：使用事件委托（更灵活）

利用事件冒泡机制，把点击事件绑定到父容器#main上，不管按钮被替换多少次，只要点击目标是id="o"的按钮，就能触发逻辑：

import './style.css';

let x = 0;

// 初始化DOM
document.querySelector('#main').innerHTML = `
    <button id="o">Click Me</button>
    <p>${x}</p>
`;

// 绑定事件到父容器
document.querySelector('#main').addEventListener('click', function(e) {
    // 判断点击的是不是目标按钮
    if (e.target.matches('#o')) {
        x++;
        console.log(x);
        document.querySelector('#main').innerHTML = `
            <button id="o">Click Me</button>
            <p>${x}</p>
        `;
    }
});

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