Javascript jQuery-autocomplete+；附加函数

我有一个页面，我想动态添加更多的文本字段，为此我使用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>

$（文档）.ready（函数（）{
$（“#添加输入”）。单击（函数（）{
$（“#输入列表”）。追加（
）；
});
});
$（函数ac（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“方案”
];
$（“#自动完成”）。自动完成({
资料来源：availableTags
});
});

我有以下HTML：

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

增加投入”；

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

问题是，这些新添加的字段不会触发自动完成功能。您知道如何实现这一点吗

---

谢谢！

问题是代码对每个附加元素使用相同的id。id必须是唯一的。重构代码，使其在附加到DOM的元素上设置类属性。然后在调用

自动完成

函数时，将类用作选择器

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>

var availableTags=[
“动作脚本”，
“AppleScript”，
“方案”
];
$（文档）.ready（函数（）{
$（“#添加输入”）。单击（函数（）{
//添加类
$（“#输入列表”）。追加（
）；
//使用类的选择器
$（“.autocomplete”）.autocomplete({
资料来源：availableTags
});
});
});

问题在于，代码对每个附加元素使用相同的id。id必须是唯一的。重构代码，使其在附加到DOM的元素上设置类属性。然后在调用

自动完成

函数时，将类用作选择器

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>

var availableTags=[
“动作脚本”，
“AppleScript”，
“方案”
];
$（文档）.ready（函数（）{
$（“#添加输入”）。单击（函数（）{
//添加类
$（“#输入列表”）。追加（
）；
//使用类的选择器
$（“.autocomplete”）.autocomplete({
资料来源：availableTags
});
});
});

一旦添加了新的输入元素，就需要在其上初始化小部件

$(function () {

    function autocomplete(el){
        $( el ).autocomplete({
            source: availableTags
        });

    }

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

    autocomplete($("#autocomplete"))

    $("#addInputs").click(function() {
        var el = $("<input type='text' size='35' name='sales[]' /><br />").appendTo("#inputList");
        autocomplete(el)
    });
});

$（函数（）{
函数自动完成（el）{
$（el）.自动完成({
资料来源：availableTags
});
}
var availableTags=[
“动作脚本”，
“AppleScript”，
“方案”
];
自动完成（$（“#自动完成”））
$（“#添加输入”）。单击（函数（）{
var el=$（“
”）。附录（“#输入列表”）；
自动完成（el）
});
});

一旦添加了新的输入元素，就需要在其上初始化小部件

$(function () {

    function autocomplete(el){
        $( el ).autocomplete({
            source: availableTags
        });

    }

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

    autocomplete($("#autocomplete"))

    $("#addInputs").click(function() {
        var el = $("<input type='text' size='35' name='sales[]' /><br />").appendTo("#inputList");
        autocomplete(el)
    });
});

$（函数（）{
函数自动完成（el）{
$（el）.自动完成({
资料来源：availableTags
});
}
var availableTags=[
“动作脚本”，
“AppleScript”，
“方案”
];
自动完成（$（“#自动完成”））
$（“#添加输入”）。单击（函数（）{
var el=$（“
”）。附录（“#输入列表”）；
自动完成（el）
});
});

在HTML ID属性中应包含唯一值，但不包含类属性，因此使用ID代替类（CLASS=“autocomplete”）

在HTML ID属性中应包含唯一值，但不包含类属性，因此使用ID代替类（CLASS=“autocomplete”）

我认为出现问题的原因是，

.autocomplete

函数只对DOM中已有的元素绑定了一次，我的建议是使用

.live

或

.on

绑定，以便以后的元素可以绑定到：

$('#autocomplete').on("focus", function(e) {
    if ( !$(this).data("autocomplete") ) {
        $(this).autocomplete({            
            source: availableTags
        });
    }
});

---

我认为出现问题的原因是，

.autocomplete

函数只对DOM中已有的元素绑定了一次，我的建议是使用

.live

或

.on

绑定，以便以后的元素可以绑定到：

$('#autocomplete').on("focus", function(e) {
    if ( !$(this).data("autocomplete") ) {
        $(this).autocomplete({            
            source: availableTags
        });
    }
});

试试这个：

$(document).on("focus", "#autocomplete", function(e) {
    if ( !$(this).data("autocomplete") ) {
        $(this).autocomplete({            
            source: availableTags
        });
    }
});

在我的网站上工作。；

试试这个：

$(document).on("focus", "#autocomplete", function(e) {
    if ( !$(this).data("autocomplete") ) {
        $(this).autocomplete({            
            source: availableTags
        });
    }
});

---

在我的网站上工作。；

谢谢！不幸的是，结果完全相同，使用类而不是id。谢谢！不幸的是，结果完全相同，使用类而不是id。谢谢！我现在将id更改为类，但我仍然无法在新添加的字段上触发自动完成。@user2500469查看更新。T对

autocomplete

的调用应该在click事件处理程序中。谢谢，现在可以很好地工作了！非常感谢您的帮助！谢谢！我现在将ID更改为class，但我仍然无法在新添加的字段中触发autocomplete。@user2500469查看更新。对

autocomplete

的调用应该在click事件处理程序中vent handler。谢谢，现在工作起来很有魅力！非常感谢您的帮助！我的假设与此类似-追加添加新元素，但由于它们不是初始DOM的一部分，因此不会触发自动完成。我尝试使用.on和.live，如您所述，但迄今为止没有成功。我的假设与此类似-追加添加新元素但由于它们不是初始DOM的一部分，因此不会触发自动完成。我尝试了使用.on和.live，正如您上面所指出的，但迄今为止没有成功。