使用_.each循环渲染表格行购买按钮，点击触发全选购买问题求助

这个问题我之前也碰到过，核心原因是JavaScript的闭包特性导致循环里的事件绑定没有正确保留每个产品的上下文——简单说就是所有按钮最后都指向了循环的最后一个产品变量，或者是你没有给每个按钮绑定独立的产品数据。下面给你几个靠谱的解决办法，按推荐程度排序：

方法1：事件委托（最推荐，性能最优） #

如果你的产品列表比较长，事件委托绝对是首选——不用给每个按钮单独绑定事件，只需要把事件绑定到表格的父元素上，通过事件触发的目标来定位对应的产品。

步骤：

• 渲染表格行时，把产品的唯一标识（比如ID）存在行的data-*属性里
• 给表格绑定点击事件，判断点击的是购买按钮，然后通过行的data属性找到对应产品

代码示例：

// 先给表格绑定事件委托
$('#product-table').on('click', '.buy-btn', function() {
  // 找到当前按钮所在的行，获取产品ID
  const productId = $(this).closest('tr').data('product-id');
  // 从产品列表里匹配对应的产品（用Lodash的find更方便）
  const targetProduct = _.find(products, { id: productId });
  // 执行购买操作
  buyProduct(targetProduct);
});

// 用_.each渲染表格行
_.each(products, function(product) {
  // 给tr加上data-product-id属性存储产品ID
  const rowHtml = `<tr data-product-id="${product.id}">
    <td>${product.name}</td>
    <td>${product.price}</td>
    <td><button class="buy-btn">立即购买</button></td>
  </tr>`;
  $('#product-table').append(rowHtml);
});

方法2：用立即执行函数（IIFE）保留闭包上下文 #

如果你的产品数量不多，也可以用IIFE把每次循环的产品变量单独封装起来，避免所有按钮共享同一个变量引用。

代码示例：

_.each(products, function(product) {
  const rowHtml = `<tr>
    <td>${product.name}</td>
    <td>${product.price}</td>
    <td><button class="buy-btn">立即购买</button></td>
  </tr>`;
  const $row = $(rowHtml);
  $('#product-table').append($row);

  // 用IIFE把当前product传入，形成独立的闭包
  (function(currentProduct) {
    $row.find('.buy-btn').on('click', function() {
      buyProduct(currentProduct);
    });
  })(product);
});

方法3：用Function.bind绑定产品参数 #

Lodash/Underscore的each回调里，你也可以直接用bind把当前产品作为参数绑定到购买函数上，这样每个按钮的点击事件都会携带对应的产品数据。

代码示例：

_.each(products, function(product) {
  const rowHtml = `<tr>
    <td>${product.name}</td>
    <td>${product.price}</td>
    <td><button class="buy-btn">立即购买</button></td>
  </tr>`;
  const $row = $(rowHtml);
  $('#product-table').append($row);

  // 绑定product作为buyProduct的第一个参数
  $row.find('.buy-btn').on('click', buyProduct.bind(null, product));
});

额外提醒：避免踩坑 #

• 不要在循环里直接绑定事件到全局选择器（比如$('.buy-btn').on(...)），这样会给所有已存在的按钮重复绑定事件，导致多次触发
• 不要用全局变量存储当前产品，否则点击时会取到最后一次赋值的产品数据

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