使用JavaScript为表格按钮绑定addEventListener点击事件无响应怎么解决

问题原因 #

• 你通过document.createElement创建的按钮虽然绑定了点击事件，但并没有实际插入到页面DOM中。你后续拼接HTML字符串时重新写了一个新的<button>标签，该标签和之前绑定了事件的DOM元素没有任何关联，自然没有绑定点击事件，点击不会触发效果。
• 你最终返回的是纯HTML字符串，通过innerHTML这类API将字符串插入页面时，不会自动附带你单独给内存中DOM元素绑定的事件。

解决方案 #

方案1：行内绑定事件（简单快捷） #

直接在拼接的HTML字符串里给按钮写行内点击事件即可：

function fillRow(employee){
  return `
  <tr>
    <td>${employee.name}</td>
    <td>${employee.surname}</td>
    <td>${employee.email}</td>
    <td><button onclick="alert('example alert')">show cars</button></td>
  </tr>
  `
}

如果后续需要调用自定义函数，也可以直接在行内写入函数调用逻辑，参数可以直接传入当前employee的属性。

方案2：全DOM操作生成元素 #

如果不想用行内事件，就放弃拼接HTML字符串，完全用DOM操作生成整行元素：

function fillRow(employee){
  // 创建行元素
  const tr = document.createElement('tr');
  // 渲染基础信息单元格
  tr.innerHTML = `
    <td>${employee.name}</td>
    <td>${employee.surname}</td>
    <td>${employee.email}</td>
  `;
  // 生成按钮单元格
  const btnTd = document.createElement('td');
  const showCarsBtn = document.createElement('button');
  showCarsBtn.innerText = 'show cars';
  // 绑定点击事件
  showCarsBtn.addEventListener('click', () => {
    alert('example alert');
  });
  btnTd.appendChild(showCarsBtn);
  tr.appendChild(btnTd);

  return tr;
}

注意使用该方案时，往表格插入行时要使用appendChildAPI，不要用innerHTML拼接：

// 正确用法示例
const tableBody = document.querySelector('tbody');
tableBody.appendChild(fillRow(employee))

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