如何修复动态表格行中PHP Ajax联动TextField值串行问题

我编写了一段JavaScript代码，点击按钮可向表格中添加包含多个单元格的行：其中一个单元格是livesearch输入框，另一个是库存数量输入框，该输入框的值需要在点击livesearch搜索结果时动态获取。但遇到的问题是，其他行中动态生成的库存输入框始终保留第一行输入框的值，希望优化脚本，使每行能根据自身livesearch输入框的对应值做出响应。

问题根源 #

• 重复绑定事件：每次点击添加按钮时，都会重新绑定搜索框的keyup/input事件和搜索结果的click事件，导致同一事件被多次绑定，触发时出现逻辑混乱。
• 重复ID：动态生成的搜索输入框使用了重复的id="stock"，ID在DOM中必须唯一，重复ID会导致选择器行为异常。
• DOM遍历层级错误：定位当前行的方式过于繁琐且容易出错，导致无法准确找到当前行对应的库存输入框。

修复后的完整代码 #

<div style="overflow-x:auto">
  <table id="stockTransfer" class="table">
    <thead>
      <tr>
        <th style="color:blue">Search Product's(Name/Code)</th>
        <th style="color:blue">instore Availability</th>
        <th style="color:blue">Price/Unit</th>
        <th style="color:blue">Choose Selling Unit(eg:cartons/etc)</th>
        <th style="color:blue">Quantity</th>
        <th style="color:blue">Cummulative Price</th>
        <th style="color:blue"> Delete </th>
      </tr>
    </thead>
    <tbody>
      <tr>
      </tr>
    </tbody>
  </table>
</div>

<button class="btnaddstockTransfer">添加商品行</button>

<script>
//stock transfer dynamic textboxes
$(document).ready(function() {
  // 添加行事件
  $(document).on('click', '.btnaddstockTransfer', function() {
    var html = '';
    html += '<tr>';
    html += '<td><div class="search-box"><input class="form-control is-warning stock" type="text" name="stock[]" placeholder="Search by name or code"><div class="result"></div></div></td>';
    html += '<td><input class="form-control is-warning eqty" type="text" name="stockeqty[]" readonly size="2"></td>';
    html += '<td><input class="form-control is-warning" type="text" name="price[]" readonly></td>';
    html += '<td><input class="form-control is-warning" type="text" name="unit[]"></td>';
    html += '<td><input class="form-control is-warning" type="number" name="qty[]" min="1"></td>';
    html += '<td><input class="form-control is-warning cumulative" type="text" name="cumulative[]" readonly></td>';
    html += '<td><button class="btn btn-danger btnremovestockTransfer">删除</button></td>';
    html += '</tr>';

    $('#stockTransfer tbody').append(html);
  });

  // 删除行事件
  $(document).on('click', '.btnremovestockTransfer', function() {
    $(this).closest('tr').remove();
  });

  // 搜索框输入事件（仅绑定一次）
  $(document).on('keyup input', '.search-box input[type="text"]', function() {
    var inputVal = $(this).val();
    var resultDropdown = $(this).siblings(".result");
    if (inputVal.length) {
      $.get("backend-search.php", {
        term: inputVal
      }).done(function(data) {
        resultDropdown.html(data);
      });
    } else {
      resultDropdown.empty();
    }
  });

  // 点击搜索结果事件（仅绑定一次）
  $(document).on("click", ".result p", function() {
    var stock = $(this).text();
    var $searchBox = $(this).closest(".search-box");
    
    // 设置当前搜索框的值
    $searchBox.find('.stock').val(stock);
    $(this).parent(".result").empty();

    // 精准定位当前行
    var $currentRow = $searchBox.closest('tr');

    // 请求并赋值库存数据
    $.ajax({
      method: "get",
      url: "saleqtyOnFly.php",
      data: {
        item: stock
      },
      success: function(data) {
        $currentRow.find(".eqty").val(data);
      }
    })
  });

  // 可选：数量变化自动计算累计价格
  $(document).on('input', 'input[name="qty[]"]', function() {
    var $row = $(this).closest('tr');
    var price = parseFloat($row.find('input[name="price[]"]').val()) || 0;
    var qty = parseInt($(this).val()) || 0;
    $row.find('.cumulative').val((price * qty).toFixed(2));
  });
});
</script>

核心修改说明 #

• 事件绑定优化：将搜索相关事件移至添加行事件外部，确保仅绑定一次，避免重复触发导致的逻辑混乱。
• 移除重复ID：删除动态输入框的id="stock"，改用类名stock选择元素，避免ID冲突问题。
• 精准DOM定位：使用closest()方法替代多层parent()调用，简洁且准确地定位当前行，确保数据只更新对应行的输入框。
• 完善交互逻辑：补充了删除行功能，可选添加累计价格自动计算逻辑，提升表格实用性。

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