修改innerHTML导致按钮失效的原因及解决方法

问题原因 #

你遇到的按钮失效问题，核心在于innerHTML +=的工作机制：当执行table.innerHTML += "<div class='break'></div>"时，浏览器会先把table内的现有DOM元素序列化为HTML字符串，拼接上新内容后，再将整个字符串重新解析成全新的DOM节点替换掉原来的内容。

这就导致你之前用document.createElement创建并添加到table里的calc按钮被销毁了——页面上显示的按钮其实是重新生成的新节点，而你后来绑定的点击事件是挂在旧节点上的，自然不会触发。

解决方案 #

方案1：改用DOM方法添加新元素（推荐）

放弃使用innerHTML +=，改用document.createElement创建新元素再追加，这样不会破坏原有DOM结构和事件绑定：

const go = document.querySelector("#go");
const table = document.querySelector("#table");

go.addEventListener('click',(event) => {
    const n = document.querySelector("#n").value;
    console.log(n);
    let calc = document.createElement('button');
    calc.className = "calc";
    calc.textContent = "calculate";
    // 先绑定事件再添加到DOM
    calc.addEventListener('click', () => {
        console.log("Test");
    })
    table.appendChild(calc);
  
    // 用DOM方法创建并添加break元素
    const breakDiv = document.createElement('div');
    breakDiv.className = 'break';
    table.appendChild(breakDiv);
  
    /* 
    ----其他元素也用createElement方式添加----
    */
});

方案2：调整操作顺序，最后创建按钮

如果一定要用innerHTML添加内容，可以把创建按钮和绑定事件的步骤放在所有innerHTML操作之后：

const go = document.querySelector("#go");
const table = document.querySelector("#table");

go.addEventListener('click',(event) => {
    const n = document.querySelector("#n").value;
    console.log(n);
  
    table.innerHTML += "<div class='break'></div>";
    /* 
    ----其他元素用innerHTML添加----
    */

    // 最后创建按钮并绑定事件
    let calc = document.createElement('button');
    calc.className = "calc";
    calc.textContent = "calculate";
    calc.addEventListener('click', () => {
        console.log("Test");
    })
    table.appendChild(calc);
});

方案3：使用事件委托

把点击事件绑定到table父元素上，利用事件冒泡机制处理按钮点击，这种方式不受后续DOM结构变化影响：

const go = document.querySelector("#go");
const table = document.querySelector("#table");

// 提前绑定事件委托
table.addEventListener('click', (e) => {
    if(e.target.classList.contains('calc')){
        console.log("Test");
    }
})

go.addEventListener('click',(event) => {
    const n = document.querySelector("#n").value;
    console.log(n);
    let calc = document.createElement('button');
    calc.className = "calc";
    calc.textContent = "calculate";
    table.appendChild(calc);
  
    table.innerHTML += "<div class='break'></div>";
    /* 
    ----其他元素用innerHTML添加----
    */
});

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