循环创建按钮仅最后一个绑定EventListener的问题求助

核心问题 #

你遇到的情况是循环变量作用域导致的引用共享问题：如果你的循环用var声明变量（比如i或者产品对象），var是函数级作用域，所有按钮的事件监听函数都会共享同一个变量引用。循环结束后，变量会指向最后一个产品，所以只有最后一个按钮的事件能正确触发。

修复方案 #

方案1：用let声明循环变量（块级作用域）

把循环里的变量声明改成let，每次循环会创建独立的变量实例，每个事件处理函数绑定当前迭代的产品：

// 示例产品列表
const products = [{id:1, item:"产品1"},{id:2, item:"产品2"},{id:3, item:"产品3"},{id:4, item:"产品4"},{id:5, item:"产品5"}];
const container = document.getElementById("product-container");

for (let i = 0; i < products.length; i++) {
  const product = products[i];
  const productRow = document.createElement("div");
  productRow.innerHTML = `${product.item} <button id="del-btn-${product.id}">删除</button>`;
  container.appendChild(productRow);

  const delBtn = document.getElementById(`del-btn-${product.id}`);
  delBtn.addEventListener("click", () => {
    container.removeChild(productRow);
  });
}

方案2：用forEach遍历数组

forEach的回调函数自带独立作用域，每个迭代的产品都是独立的：

products.forEach(product => {
  const productRow = document.createElement("div");
  productRow.innerHTML = `${product.item} <button id="del-btn-${product.id}">删除</button>`;
  container.appendChild(productRow);

  const delBtn = document.getElementById(`del-btn-${product.id}`);
  delBtn.addEventListener("click", () => {
    container.removeChild(productRow);
  });
});

方案3：事件委托（更高效）

不需要给每个按钮单独绑定事件，只给父容器绑定一次，通过事件目标判断点击的是删除按钮：

const container = document.getElementById("product-container");

// 先渲染所有产品
products.forEach(product => {
  const productRow = document.createElement("div");
  // 用data属性存储产品ID
  productRow.dataset.productId = product.id;
  productRow.innerHTML = `${product.item} <button data-product-id="${product.id}">删除</button>`;
  container.appendChild(productRow);
});

// 父容器绑定事件
container.addEventListener("click", (e) => {
  if (e.target.tagName === "BUTTON") {
    const productId = e.target.dataset.productId;
    const productRow = document.querySelector(`[data-product-id="${productId}"]`);
    container.removeChild(productRow);
  }
});

总结 #

本质是作用域的问题：var声明的变量会被所有循环迭代的事件函数共享，而let或forEach能保证每个迭代有独立的变量上下文，事件委托则从根源避免了批量绑定的问题，同时性能更优。

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