动态添加带指定class的按钮点击不触发绑定事件，问题出在哪里？

问题原因 #

• 事件绑定仅在页面初始化时执行了一次：代码中的querySelectorAll('.trying')只会抓取页面加载完成那一刻已经存在的DOM元素，后续通过addbutton动态插入的按钮是在绑定逻辑执行完才生成的，没有被绑定click事件。
• 原elems数组是静态的：初始化生成的elems数组不会自动同步后续新增的DOM元素，就算给新按钮补上绑定，用原有elems数组计算索引也会返回-1，拿不到正确结果。

修复方案 #

方案1（推荐：事件委托，天然支持动态元素） #

利用事件冒泡机制把事件绑定到所有.trying按钮的共同父级元素上，不用每次新增元素单独绑定，同时每次点击时重新获取所有.trying元素计算索引，保证结果正确。
修改后的JS代码如下：

function addbutton(id) {
  const newtag = document.createElement("button");
  newtag.classList.add("trying");
  newtag.innerHTML = "点击这个按钮可以正常调用grupla函数";
  const divarea = document.getElementById("kanban_1");
  divarea.appendChild(newtag);
};

// 也可以把事件绑定到更靠近按钮的共同父容器，减少事件触发范围
document.addEventListener('click', function(e) {
  // 仅对类名为trying的元素触发逻辑
  if (e.target.classList.contains('trying')) {
    // 每次点击重新拉取所有trying按钮计算索引，适配新增元素
    const allTrying = Array.from(document.querySelectorAll('.trying'));
    const index = allTrying.indexOf(e.target);
    alert(index);
  }
});

方案2（手动绑定+更新数组） #

如果不想用事件委托，也可以在每次新增按钮的时候手动绑定事件，同步更新索引数组：

// 把elems改成可修改的let类型
let elems = Array.from(document.querySelectorAll('.trying'));
elems.forEach(el => el.addEventListener('click', grupla));

function addbutton(id) {
  const newtag = document.createElement("button");
  newtag.classList.add("trying");
  newtag.innerHTML = "点击这个按钮可以正常调用grupla函数";
  const divarea = document.getElementById("kanban_1");
  divarea.appendChild(newtag);
  // 给新增按钮手动绑定事件
  newtag.addEventListener('click', grupla);
  // 把新按钮同步到索引数组里
  elems.push(newtag);
};

function grupla() {
  var index = elems.indexOf(this);
  alert(index);
};

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