动态添加Table Row后搜索功能失效问题排查与修复求助

问题 #

我做了一个支持新增、编辑、删除和搜索功能的维护表，现在遇到问题：硬编码的表格行可以正常使用搜索功能，但自动添加的动态行搜索完全失效，请问该怎么修复？

问题根源 #

1. 事件绑定未覆盖动态元素：初始代码是直接给页面加载时存在的输入框绑定change事件，动态新增的输入框是绑定事件之后才创建的，所以不会触发搜索逻辑。
2. 搜索结果赋值范围错误：原search函数会把返回的员工信息赋值给所有同名输入框，而不是当前触发搜索的那一行，就算事件能触发，结果也会批量更新所有行，不符合需求。

修复方案 #

1. 改用事件委托绑定搜索事件 #

把change事件绑定到静态父元素（比如document），利用事件冒泡机制，让动态生成的输入框触发事件时也能执行回调。

2. 限定搜索结果的更新范围 #

在触发事件时，传入当前输入框所在的表格行，让search函数只更新该行对应的输入框，避免批量更新。

3. 优化动态行的name属性（可选） #

给动态生成的输入框name加上索引后缀（比如ctrl_name_p1_0），既避免同名元素过多导致的选择混乱，也方便后续表单提交时区分不同行的数据。

修复后的完整代码 #

JavaScript代码 #

$(document).ready(function() {
  // 事件委托：处理所有动态生成的输入框change事件
  $(document).on('change', '.plant3-action-onchange', function() {
    const $input = $(this);
    const value = $input.val().trim();
    if (value.length > 3) {
      // 传入当前输入框所在的行，用于精准更新
      search(value, $input.closest('tr'));
    }
  });

  function search(name, $currentRow) {
    $.post(`/iworkflow/extend/index.php/go/post/live/app_ph_acs/maintenance/FindEmployee`, {
      'name': name
    }, function(emp) {
      // 只更新当前行的姓名和账号输入框
      $currentRow.find('[name*="ctrl_name"]').val(emp["Name"]);
      $currentRow.find('[name*="ctrl_adname"]').val(emp["Win Account"]);
    }).always(function() {
      // 可在此添加AJAX请求完成后的额外处理逻辑
    });
  }

  // Plant1 行添加逻辑
  let i = 0
  const addrowP1 = () => {
    const therow = `
<tr class="plant1-row_${i}" data-plant1="">
<td class="p-0">
<input type="text" class="form-control-plaintext form-control-sm px-1 plant3-action-onchange" name="ctrl_area1_p1_${i}" placeholder="Input Areas">
</td>
<td class="p-0">
<input type="text" class="form-control-plaintext form-control-sm px-1 plant3-action-onchange" name="ctrl_adname_p1_${i}" placeholder="Search Adname">
</td>
<td class="p-0">
<input type="text" class="form-control-plaintext form-control-sm px-1 plant3-action-onchange" name="ctrl_name_p1_${i}" placeholder="Search name">
</td>
`;
    $('#TableP1 tbody').append(therow);
    i++
  }

  // 初始化Plant1第一行
  addrowP1();

  // 添加Plant1行的按钮事件
  $(document).on('click', '.btnAddRowP1', addrowP1);

  // Plant3 行添加逻辑
  let j = 0;
  const addrowP3 = () => {
    const therow = `
<tr class="plant3-row_${j}" data-plant3="">
<td class="p-0">
<input type="text" class="form-control-plaintext form-control-sm px-1 plant3-action-onchange" name="ctrl_area1_p3_${j}" placeholder="Input Areas">
</td>
<td class="p-0">
<input type="text" class="form-control-plaintext form-control-sm px-1 plant3-action-onchange" name="ctrl_adname_p3_${j}" placeholder="Search Adname">
</td>
<td class="p-0">
<input type="text" class="form-control-plaintext form-control-sm px-1 plant3-action-onchange" name="ctrl_name_p3_${j}" placeholder="Search name">
</td>
`;
    $('#TableP3 tbody').append(therow);
    j++
  }

  // 初始化Plant3第一行
  addrowP3();

  // 添加Plant3行的按钮事件
  $(document).on('click', '.btnAddRowP3', addrowP3);
});

HTML代码（保持原有结构即可） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p-3">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item ml-2" role="presentation">
      <button class="nav-link active" id="t41-tab" data-toggle="tab" data-target="#t41-tab-pane" type="button" role="tab" aria-controls="t41-tab-pane" aria-selected="true">
<i class="fa-solid fa-building fa-fw"></i> Plant 1
</button>
    </li>
    <li class="nav-item ml-1" role="presentation">
      <button class="nav-link" id="t42-tab" data-toggle="tab" data-target="#t42-tab-pane" type="button" role="tab" aria-controls="t42-tab-pane" aria-selected="false">
<i class="fa-solid fa-building fa-fw"></i> Plant 3 & 4
</button>
    </li>
  </ul>

  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade p-2 show active" id="t41-tab-pane" role="tabpanel" aria-labelledby="t41-tab" tabindex="0">
      <!-- Plant 1 -->
      <table class="table table-sm table-bordered fs-10 w-100" id="TableP1">
        <thead>
          <tr>
            <th>Area for Plant 1</th>
            <th>ADName / PH Account</th>
            <th>FullName</th>
          </tr>
        </thead>
        <tbody class=""></tbody>
        <tfoot>
          <tr>
            <td contenteditable="false" colspan="99" class="text-right">
              <a href="javascript:void(0)" class="fa-regular fa-plus text-success btnAddRowP1 px-3" data-toggle="tooltip" title="" data-original-title="Add Row"></a>
              <a href="javascript:void(0)" class="fa-regular fa-trash text-danger btnDelRowP1 px-3" data-toggle="tooltip" title="" data-original-title="Delete Row"></a>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>

    <div class="tab-pane fade p-2" id="t42-tab-pane" role="tabpanel" aria-labelledby="t42-tab" tabindex="0">
      <!-- Plant 3 & 4 -->
      <table class="table table-sm table-bordered fs-10 w-100" id="TableP3">
        <thead>
          <tr>
            <th>Area for Plant 3 & 4</th>
            <th>ADName / PH Account</th>
            <th>FullName</th>
          </tr>
        </thead>
        <tbody class="">
        </tbody>
        <tfoot>
          <tr>
            <td contenteditable="false" colspan="99" class="text-right">
              <a href="javascript:void(0)" class="fa-regular fa-plus text-success btnAddRowP3 px-3" data-toggle="tooltip" title="" data-original-title="Add Row"></a>
              <a href="javascript:void(0)" class="fa-regular fa-trash text-danger btnDelRowP3 px-3" data-toggle="tooltip" title="" data-original-title="Delete Row"></a>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>

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