jQuery each循环仅对动态创建的<td>元素执行一次的问题

嘿，我帮你排查一下这个问题，大概率是两个常见坑导致的，咱们一步步来解决：

1. 首先改掉重复的ID！ #

你代码里给动态生成的<input>和<td>用了id="txtqty"、id="total"，这是核心问题之一！ID在整个页面里必须是唯一的，jQuery用$("#txtqty")选择的时候，只会找到第一个匹配的元素，自然each循环只执行一次。

先把HTML生成代码里的ID换成类名：

<tr>
  <td class="col-md-1 text-center">'+sr+'</td>
  <td class="col-md-4 text-center">'+name+'</td>
  <td class="tblprc col-md-1 text-center">'+price+'</td>
  <td class="col-md-2 text-center">
    <div class="form-group">
      <input type="text" class="form-control text-center txtqty" onkeypress="return isNumberKey(event);">
    </div>
  </td>
  <td class="total col-md-1 text-center">0</td>
</tr>

2. 针对动态元素的正确处理方式 #

如果你的需求是监听每个数量输入框的变化，计算对应行的总价，别用普通的each绑定事件——动态生成的元素在页面加载时不存在，普通事件绑定会失效。要用事件委托绑定到父元素（比如你的表格）：

// 假设你的表格id是orderTable，绑定input事件到所有动态生成的.txtqty
$("#orderTable").on("input", ".txtqty", function() {
  // 获取当前输入框所在的行
  const currentRow = $(this).closest("tr");
  // 提取当前行的单价和输入的数量
  const price = parseFloat(currentRow.find(".tblprc").text()) || 0;
  const qty = parseFloat($(this).val()) || 0;
  // 计算并更新总价
  const total = price * qty;
  currentRow.find(".total").text(total.toFixed(2));
});

如果是想在动态添加行之后，批量遍历所有动态生成的<td>（比如初始化总价），要确保在元素生成之后执行each：

// 假设你动态添加行的函数是addRow()，在添加完后执行遍历
function addRow() {
  // 这里是你生成并插入行的代码...
  
  // 遍历所有.total单元格，初始化计算
  $(".total").each(function(index) {
    const row = $(this).closest("tr");
    const price = parseFloat(row.find(".tblprc").text()) || 0;
    const qty = parseFloat(row.find(".txtqty").val()) || 0;
    $(this).text((price * qty).toFixed(2));
  });
}

为什么之前只执行一次？ #

再帮你复盘下：

• 重复ID导致jQuery选择器只能匹配第一个元素，each自然只跑一次；
• 如果是事件绑定时机不对（在元素生成前就绑定），那后续动态添加的元素根本没绑定到事件，看起来就像只执行了一次初始元素的逻辑。

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