JavaScript动态创建按钮的click事件监听器不生效如何解决

当前代码的事件绑定只在页面初始加载时执行了一次：

• 初始运行document.querySelectorAll(".add-btn")时，只能选中页面渲染完成时就存在的硬编码按钮，仅给这批按钮绑定了点击事件
• 后续点击生成新的动态按钮后，虽然每次点击回调里都重新查询了所有.add-btn节点赋值给btns变量，但没有给新增的按钮执行addEventListener绑定操作，新按钮没有挂载任何自定义点击逻辑，点击自然没有响应
• 把动态按钮改为submit类型能触发页面重载，是浏览器原生的表单提交默认行为，和你编写的JS监听逻辑没有关系

处理动态生成元素的事件绑定，最优方案是用事件委托，不需要每次新增元素都重复绑定事件：
直接把事件监听器绑定到始终存在、不会被动态删除的静态父元素上（本场景下就是.tracker-title容器），利用DOM事件冒泡的机制，在监听器里判断触发点击的目标元素是不是.add-btn按钮，再执行对应逻辑即可。一次绑定就能覆盖所有现有和未来新增的按钮，性能更好、代码更简洁，也不会出现重复绑定的问题。

修正后的完整代码：

const title = document.querySelector(".tracker-title");
// count初始值根据你页面初始硬编码的表单项数量调整即可
let count = 2;
const exampleArray = ["Meditation", "Exercise", "Studying", "Reading"];

// 给静态父容器绑定单次点击监听
title.addEventListener("click", function (e) {
  // 点击的目标不是add-btn按钮时直接跳过，不执行业务逻辑
  if (!e.target.matches(".add-btn")) return;

  count += 1;
  const element = document.createElement("div");
  element.classList.add("form-add-btn", "form-layout");

  const label = document.createElement("label");
  label.setAttribute("for", `${count}`);
  label.innerText = "Title";

  const input = document.createElement("input");
  input.setAttribute("placeholder", `ex. ${exampleArray[count - 3]}`);
  input.setAttribute("id", `${count}`);
  input.setAttribute("type", "text");

  const button = document.createElement("button");
  button.classList.add("add-btn");
  button.innerText = "Add";
  button.setAttribute("type", "button");

  element.append(label, input, button);
  title.appendChild(element);
});

如果硬要走逐个按钮绑定的逻辑，每次新建完按钮后，需要单独给这个新生成的按钮绑定事件，不能只更新btns变量的节点集合。但这种方案需要每次创建元素都写一遍绑定逻辑，后续如果逻辑修改要改多处，还容易出现重复绑定导致一次点击触发多次回调的问题，没有使用价值。

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