动态生成HTML时绑定的Event Listener不触发，代码实现是否正确？

问题根因 #

你代码的核心问题出在DOM追加的写法上：

• 你使用innerHTML +=的方式拼接新行，该操作会先把#employeeData下所有现有DOM内容序列化为字符串，拼接新的HTML字符串后，再整体重新解析为DOM节点。这个过程会销毁父容器下所有已绑定的事件监听器，多次调用renderEmployee时，之前添加的行的按钮事件都会全部失效。
• 逐行绑定事件的方式性能较差，数据量较大时会创建大量重复的事件回调，占用不必要的内存。

推荐解决方案：使用事件委托（最优） #

直接给父容器绑定一次事件即可，后续新增的所有行按钮都会自动触发事件，不需要逐行绑定，也不会受DOM更新影响。
你只需要在页面初始化时执行一次以下代码：

$('#employeeData').on('click', 'button[data-empid]', function() {
  const empId = $(this).attr('data-empid')
  const btnId = $(this).attr('id')
  if (btnId.endsWith('Del')) {
    // 删除逻辑
    deleteEmployee(empId)
    console.log('test')
  } else if (btnId.endsWith('Edit')) {
    // 此处补充你的编辑逻辑
  }
})

使用该方案后，你原有renderEmployee函数里的两行事件绑定代码可以直接删除。

可选解决方案：修改DOM追加方式 #

如果你坚持要逐行绑定事件，把DOM拼接的代码替换为insertAdjacentHTML即可，该方法只会在末尾插入新的DOM节点，不会销毁已有的DOM和绑定的事件：
把原有代码中的：

document.getElementById("employeeData").innerHTML += newRow;

替换为：

document.getElementById("employeeData").insertAdjacentHTML('beforeend', newRow)

注意：你当前的代码仅绑定了删除按钮的点击事件，未添加编辑按钮的事件逻辑，按需补充即可。

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