使用innerHTML插入按钮后仅最后一个的onclick事件生效是什么原因？

• 核心问题出在x.innerHTML +=的操作逻辑上：每次执行+=拼接HTML时，浏览器会先把#content下所有已存在的DOM节点全部销毁，将现有内容转为纯字符串拼接上新的HTML片段后，再重新解析生成全新的DOM节点。
• 之前循环中给旧按钮绑定的点击事件是绑定在被销毁的旧DOM节点上的，重建后的新按钮并没有绑定事件，只有最后一次循环完成后绑定的按钮不会被后续操作销毁，所以只有它能触发点击事件。

方案1：一次性拼接所有HTML后再统一绑定事件 #

先把所有按钮的HTML拼接完成，一次性赋值给innerHTML，避免多次修改innerHTML销毁已有DOM，再统一给所有按钮绑定事件。

var x = document.getElementById("content");
var html = '';
// 先拼接所有按钮HTML
for(let i = 0; i < 2; i++) {
    html += `
    <button type="button" class="click-btn" value="${i}">
        click me
    </button>
  `;
}
// 一次性写入DOM
x.innerHTML = html;
// 统一绑定事件
document.querySelectorAll('.click-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    console.log('clicked!');
  });
});

方案2：使用appendChild代替innerHTML拼接 #

直接用DOM API创建按钮再插入父元素，不会影响已存在的节点，之前绑定的事件也不会丢失。

var x = document.getElementById("content");
for(let i = 0; i < 2; i++) {
  const btn = document.createElement('button');
  btn.type = 'button';
  btn.className = 'click-btn';
  btn.value = i;
  btn.textContent = 'click me';
  btn.addEventListener('click', () => {
    console.log('clicked!');
  });
  x.appendChild(btn);
}

方案3：事件委托（更适合动态新增元素的场景） #

直接给父元素#content绑定点击事件，通过事件冒泡判断点击目标是否为按钮，后续新增按钮也不需要重新绑定事件，性能更高。

var x = document.getElementById("content");
// 父元素绑定事件
x.addEventListener('click', e => {
  // 判断点击的元素是不是目标按钮
  if(e.target.classList.contains('click-btn')) {
    console.log('clicked!');
    // 可直接获取按钮的value值：console.log(e.target.value)
  }
});
// 正常插入按钮即可，无需单独绑定事件
for(let i = 0; i < 2; i++) {
  x.innerHTML += `
  <button type="button" class="click-btn" value="${i}">
      click me
  </button>
`;
}

你原代码中所有生成的按钮都设置了相同的id="click-btn-id"，HTML规范要求id在整个文档中必须唯一，重复id会导致后续选择DOM时出现预期外的问题，建议删除该重复id或者按规则生成唯一id。

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