相邻注入Button A与B时，Button A的click事件无法触发

核心问题是**innerHTML +=会破坏原有DOM元素的事件绑定**：
当你用document.getElementsByClassName('ClassName')[i].innerHTML += ButtonB注入第二个按钮时，浏览器会重新解析目标容器内的所有HTML——包括已注入的Button A。这个过程会销毁原有的Button A DOM节点，再重新创建一个同名节点，但新节点并未绑定原来的click事件监听器，因此Button A点击无效。即使移除Button B，原Button A已被替换，事件自然无法触发。

方案1：用appendChild替代innerHTML +=（推荐） #

直接创建按钮DOM元素，通过appendChild追加到目标容器，不会破坏原有元素和事件：

// 创建并注入Button A
const btnA = document.createElement('div');
btnA.id = '1';
btnA.className = 'classA';
btnA.style.cssText = 'margin-left: 8px; margin-bottom: 14px;';
btnA.innerHTML = '<i class="fa fa-plus-circle"></i>';
btnA.addEventListener('click', async () => functionA());
document.getElementsByClassName('ClassName')[i].appendChild(btnA);

// 创建并注入Button B
const btnB = document.createElement('div');
btnB.id = '2';
btnB.className = 'classB';
btnB.style.cssText = 'margin-left: 8px; margin-bottom: 14px;';
btnB.innerHTML = '<i class="fa fa-clock-o"></i>';
btnB.addEventListener('click', async () => functionB());
document.getElementsByClassName('ClassName')[i].appendChild(btnB);

方案2：使用事件委托 #

将事件监听器绑定到父容器，利用事件冒泡机制触发，无论按钮何时注入都能生效：

const parentContainer = document.getElementsByClassName('ClassName')[i];
// 绑定父容器点击事件
parentContainer.addEventListener('click', async (e) => {
  // 匹配Button A或其子元素
  if (e.target.closest('#1')) {
    functionA();
  }
  // 匹配Button B或其子元素
  else if (e.target.closest('#2')) {
    functionB();
  }
});

// 正常注入按钮
parentContainer.innerHTML += `
<div id="1" class="classA" style="margin-left: 8px; margin-bottom: 14px;">
  <i class="fa fa-plus-circle"></i>
</div>
`;
parentContainer.innerHTML += `
<div id="2" class="classB" style="margin-left: 8px; margin-bottom: 14px;">
  <i class="fa fa-clock-o"></i>
</div>
`;

方案3：注入后重新绑定事件（不推荐） #

若坚持使用innerHTML +=，需在每次注入后重新绑定所有按钮事件，但易出现重复绑定问题，需谨慎：

// 注入Button A并绑定事件
document.getElementsByClassName('ClassName')[i].innerHTML += `
<div id="1" class="classA" style="margin-left: 8px; margin-bottom: 14px;">
  <i class="fa fa-plus-circle"></i>
</div>
`;
document.getElementById('1').addEventListener('click', async () => functionA());

// 注入Button B后，重新绑定所有按钮事件
document.getElementsByClassName('ClassName')[i].innerHTML += `
<div id="2" class="classB" style="margin-left: 8px; margin-bottom: 14px;">
  <i class="fa fa-clock-o"></i>
</div>
`;
document.getElementById('1').addEventListener('click', async () => functionA());
document.getElementById('2').addEventListener('click', async () => functionB());

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