JS动态创建input元素autocomplete功能不生效原因排查

动态输入框autocomplete失效是三处代码逻辑错误导致的，和autocomplete组件本身无关：

• 动态拼接的输入框id被硬编码为example，没有拼接递增的计数变量i，后续用$('#example' + i)做选择器时根本匹配不到新生成的元素，绑定逻辑完全不生效。另外全局重复同名id本身违反HTML规范，会导致各类选择器匹配异常。
• autocomplete的绑定逻辑写在了添加按钮的click回调外部，这段代码仅会在页面首次加载时执行一次，后续每次点击按钮生成新输入框时，绑定逻辑不会触发，新元素自然不会带上autocomplete功能。
• 初始静态加载的输入框id为example，和你写的选择器规则#example+数字不匹配，现有代码下初始输入框能正常运行属于偶发现象，本身绑定逻辑就存在漏洞。
• 额外小问题：<textarea>标签写了自闭合格式，不符合HTML规范，容易导致DOM结构错乱。

直接调整代码逻辑即可：

1. 统一所有输入框的id命名规则，动态生成的输入框id必须拼接计数值，保证每个元素id全局唯一。
2. 把autocomplete绑定逻辑移到添加按钮的点击回调内部，等新行插入DOM完成后，立刻给当前新生成的输入框绑定组件。
3. 把删除按钮的事件委托移到点击回调外部，页面加载时绑定一次即可，不需要每次添加新行都重复绑定事件，避免不必要的内存占用。
4. 修正textarea标签的写法，去掉错误的自闭合格式。
5. 把初始静态输入框的id对齐统一命名规则，页面加载时直接给第一个输入框绑定autocomplete即可，不需要写额外的兼容逻辑。

修正后可直接运行的代码 #

HTML部分 #

<table class="table table-bordered" id="dynamic_field">
  <tr>
    <td><input type="text" autocomplete="off" id="example1" name="example[]" placeholder="Example" class="exampleInput" required/></td>
    <td><textarea name="ex[]" cols="8" rows="2" placeholder="Example" class="exampleTxtArea" required></textarea></td>
    <td><button type="button" name="addElement" id="addElement" class="btnAddElement">+</button></td>
  </tr>
</table>

JS部分 #

$(document).ready(function() {
  let rowCount = 1;
  // 初始化第一个默认输入框的autocomplete
  $('#example1').autocomplete({
    source: 'input_search.php',
  });

  // 行删除事件全局绑定一次即可
  $(document).on('click', '.btn_removeRow', function() {
    const targetRowId = $(this).attr("id");
    $('#row' + targetRowId).remove();
  });

  // 新增行逻辑
  $('#addElement').click(function() {
    rowCount++;
    // 拼接新行HTML，注意输入框id拼接行计数
    const newRowHtml = `
      <tr id="row${rowCount}">
        <td>
          <input type="text" autocomplete="off" id="example${rowCount}" name="example[]" placeholder="Example" class="exampleInput" required/>
        </td>
        <td>
          <textarea name="ex[]" cols="8" rows="2" placeholder="Example" class="exampleTxtArea" required></textarea>
        </td>
        <td>
          <button type="button" name="remove" id="${rowCount}" class="btn_removeRow">-</button>
        </td>
      </tr>
    `;
    // 插入新行到DOM
    $('#dynamic_field').append(newRowHtml);
    // 给新插入的输入框绑定autocomplete
    $(`#example${rowCount}`).autocomplete({
      source: 'input_search.php',
    });
  });
});

注：如果不想每次插入元素都手动绑定，也可以通过事件委托监听输入框的focus、keydown等事件实现动态绑定，但对于jQuery UI autocomplete来说，插入后立刻初始化的方式兼容性最好，没有额外坑点。

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