前端动态新增行乘法功能失效及折扣码功能添加求助

看起来你碰到了动态DOM元素事件绑定失效的典型问题——初始页面加载时你给现有输入框绑定了计算事件，但新增的行是后来克隆生成的，并没有被绑定事件。另外我帮你把折扣码功能也整合进去，下面是完整的解决方案：

一、问题根源分析 #

你原来的代码应该是直接给初始的输入框绑定了input或者change事件，但动态克隆出来的新行元素不在初始DOM树里，所以事件监听器不会作用在它们身上。解决这个问题的最佳方式是事件委托——把事件绑定到父容器上，利用事件冒泡来处理所有子元素的事件，包括后来新增的。

二、完整代码实现 #

1. HTML部分（更新模板行，添加折扣码输入） #

<!-- 父容器，用来存放所有行 -->
<div id="rowsContainer">
  <!-- 模板行，默认隐藏 -->
  <div id="templateRow" style="display: none;">
    <input type="number" class="quantity" placeholder="数量">
    <input type="number" class="price" placeholder="单价">
    <input type="text" class="discount-code" placeholder="折扣码（如9折填0.9）">
    <input type="number" class="total" placeholder="总价" readonly>
    <button class="remove-row">删除</button>
  </div>
  <!-- 初始行 -->
  <div class="row">
    <input type="number" class="quantity" placeholder="数量">
    <input type="number" class="price" placeholder="单价">
    <input type="text" class="discount-code" placeholder="折扣码（如9折填0.9）">
    <input type="number" class="total" placeholder="总价" readonly>
    <button class="remove-row">删除</button>
  </div>
</div>
<button id="addRow">添加新行</button>

2. JavaScript部分（事件委托+计算逻辑+折扣处理） #

var maxID = 0;
const rowsContainer = document.getElementById('rowsContainer');

// 获取模板行并克隆的函数
function getTemplateRow() {
  const template = document.getElementById("templateRow");
  const newRow = template.cloneNode(true);
  newRow.id = `row-${++maxID}`;
  newRow.style.display = "flex"; // 根据你的布局调整显示方式，比如block
  newRow.classList.add('row');
  return newRow;
}

// 添加新行的按钮事件
document.getElementById('addRow').addEventListener('click', function() {
  const newRow = getTemplateRow();
  rowsContainer.appendChild(newRow);
});

// 事件委托：处理所有行的输入变化（数量、单价、折扣码）
rowsContainer.addEventListener('input', function(e) {
  const target = e.target;
  // 判断触发事件的是数量、单价还是折扣码输入框
  if (target.classList.contains('quantity') || target.classList.contains('price') || target.classList.contains('discount-code')) {
    const row = target.closest('.row'); // 获取当前输入框所在的行
    const quantity = parseFloat(row.querySelector('.quantity').value) || 0;
    const price = parseFloat(row.querySelector('.price').value) || 0;
    const discount = parseFloat(row.querySelector('.discount-code').value) || 1; // 默认无折扣
    const total = quantity * price * discount;
    row.querySelector('.total').value = total.toFixed(2); // 保留两位小数
  }
});

// 事件委托：处理删除行按钮
rowsContainer.addEventListener('click', function(e) {
  if (e.target.classList.contains('remove-row')) {
    const row = e.target.closest('.row');
    // 至少保留一行
    if (rowsContainer.querySelectorAll('.row').length > 1) {
      row.remove();
    } else {
      alert('至少要保留一行');
    }
  }
});

三、关键说明 #

• 事件委托的优势：不管是初始行还是后来新增的行，只要在rowsContainer容器里，所有输入框的变化都会被监听到，完美解决动态元素事件失效的问题。
• 折扣码逻辑：默认折扣为1（无折扣），用户可以输入小数（比如0.8代表8折），计算总价时自动乘以折扣率。
• 行的标识：给每个新增行设置唯一ID，方便后续如果有其他操作可以精准定位。
• 删除行限制：防止用户删除所有行，保留至少一行数据。

这样修改后，新增行的乘法计算功能就能正常工作，同时也集成了折扣码的计算功能，应该能解决你的项目停滞问题啦！

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