javascript - jQuery - 自动完成+附加功能

Question

我有一个页面，我想在其中动态添加更多文本字段，为此我使用 jQuery .append 函数。但是，我还希望使用另一个 jQuery 函数自动完成这些文本字段。这是我的 JavaScript:

<script>
$( document ).ready(function() {
    $("#addInputs").click(function() {
        $("#inputList").append("<input type='text' id='autocomplete' size='35' name='sales[]' /><br />");
    });
});
</script>
<script>
$(function ac() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Scheme"
  ];
  $( "#autocomplete" ).autocomplete({
    source: availableTags
  });
});
</script>

我有以下 HTML:

    <div id='inputList'>
    <input type='text' id='autocomplete' size='35' name='sales[]' /><br />
    </div>
    <a id='addInputs' />Add Inputs</a>";

自动完成功能适用于页面加载后我已经在屏幕上显示的文本字段。 “添加输入”也可以正常工作并在屏幕上正确附加更多字段。

问题是那些新添加的字段不会触发自动完成功能。有什么想法可以实现这一点吗？

谢谢!

Answer 1

问题是代码对每个附加元素使用相同的 id。 Id 必须是唯一的。重构代码，以便它在附加到 DOM 的元素上设置类属性。然后在调用 autocomplete 函数时使用该类作为选择器。

Javascript

<script>

      var availableTags = [
        "ActionScript",
        "AppleScript",
        "Scheme"
      ];

      $( document ).ready(function() {
        $("#addInputs").click(function() {
          //Adding the class
          $("#inputList").append("<input type='text' class='autocomplete' size='35' name='sales[]' /><br />");

          //Selector using the class
          $( ".autocomplete" ).autocomplete({
            source: availableTags
          });
        });
    });
</script>