在onclick函数中使用innerHTML时仅触发一次的问题求助

问题描述 #

点击按钮时想在其旁生成带不同数字的HTML元素，但当前代码里的onclick函数仅能触发一次——移除saveContainerHTML.innerHTML += (counter)后函数可正常多次触发，保留该行就只能触发一次。要求不能用HTML内联onclick="myFunction()"，也不用jQuery。

问题根源 #

使用innerHTML +=时，浏览器会重新解析并渲染整个容器内的所有元素，原来的按钮会被销毁后重新创建，而新生成的按钮没有绑定之前的onclick事件，所以后续点击不再生效。

解决方案 #

方案1：用appendChild创建新元素添加

这种方式不会破坏原有元素的事件绑定，还能避免XSS风险：

var saveHTML = document.getElementById('save');
var saveContainerHTML = document.getElementById("save-container");
var counter = 0;

saveHTML.onclick = function() {
  counter++;
  console.log("Save pressed");
  // 创建新元素并设置内容
  var numElement = document.createElement('span');
  numElement.textContent = counter;
  // 将新元素添加到容器中
  saveContainerHTML.appendChild(numElement);
};

<div id="save-container">
  <button id="save"> save </button>
</div>

方案2：用insertAdjacentHTML插入内容

这个方法会在指定位置直接插入HTML片段，不会重新渲染整个容器，原有按钮的事件绑定不受影响：

var saveHTML = document.getElementById('save');
var counter = 0;

saveHTML.onclick = function() {
  counter++;
  console.log("Save pressed");
  // 在按钮后方插入数字元素
  saveHTML.insertAdjacentHTML('afterend', `<span>${counter}</span>`);
};

<div id="save-container">
  <button id="save"> save </button>
</div>

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