Javascript 仅为第一个动态插入的元素初始化jquery自动完成

以下是我们为动态插入的元素初始化自动完成jquery的方法：

$(function() {
  setTimeout(function(){
    $("[id^='requisition_material_items_attributes_'][id$='_item_name_autocomplete']").each(function (){
       $(this).autocomplete({
        minLength: 1,
        source: $(this).data('autocomplete-source'),
        select: function(event, ui) {
            $(this).val(ui.item.value);
        }
      });
    });
  }, 5000);
});

这里的setTimeout（5秒延迟）允许对第一个动态插入的元素进行自动完成初始化。但是，初始化对第二个插入的元素不起作用，自动完成对第二个元素也不起作用。如何修复上面的js代码，使其对第二个元素和第二个元素起作用？谢谢

更新： 所谓的duplicate case提供的解决方案在这里不起作用，因为它针对的是另一个问题。在duplicate case中，当使用javascript生成新元素时，通过添加autocomplete初始化来解决问题。在我们的例子中，新元素是由Rails生成的，不能使用autocomplete初始化插入在我们的例子中，自动完成对第一个插入的元素起作用，而对第二个元素不起作用。我们的问题是使自动完成对第二个元素进行初始化，然后继续

更新：项目的rails视图\u名称\u自动完成：

<%= f.input :item_name_autocomplete, :label => t("Item Name"), :input_html => { data: {autocomplete_source: SUBURI + base_materialx.autocomplete_parts_path}},:placeholder => t("Enter Part Name Keyword"), :required => true  %>

---

setTimeout在指定的延迟后调用函数，它没有设置间隔，您可以使用setInterval函数，但在这种情况下这是一个糟糕的主意。您应该在生成目标生成的元素时选择它们，然后在这些特定元素上调用该方法。没有可靠/良好的方法来处理此问题

setTimeout在指定的延迟后调用函数，它没有设置间隔，您可以使用setInterval函数，但在这种情况下这是一个糟糕的主意。您应该在生成目标生成的元素时选择它们，然后在这些特定元素上调用该方法。没有可靠/良好的方法来处理此问题

脚本需要从setTimeout更改提取函数回调

我在下面举例说明了你的情况，可能有助于你了解情况

function registerAutoComplete(elements) {
    return elements.each(function () {
        $(this).autocomplete({
            minLength: 1,
            source: $(this).data('autocomplete-source'),
            select: function (event, ui) {
                $(this).val(ui.item.value);
            }
        });
    });
}

//if you create new autocomplete element with some function 
function createAutocompleteElement() {
    var $control = $('<input />').data('autocomplete-source', [
        "Add the Data Source object here", "Value 1", "Source Value 2", "Source Value 3"]);

    return registerAutoComplete($control);
}

$(function () {
    //this below function sufficient to register autocomplete with specified selector
    registerAutoComplete($("[id^='requisition_material_items_attributes_'][id$='_item_name_autocomplete']"));

    /*// below setTimeout delay call back not required as it runs after dom ready.
    setTimeout(function () {
        registerAutoComplete($("[id^='requisition_material_items_attributes_'][id$='_item_name_autocomplete']"));
    }, 5000);
    */
});

---

脚本需要从setTimeout更改提取函数回调

我在下面举例说明了你的情况，可能有助于你了解情况

function registerAutoComplete(elements) {
    return elements.each(function () {
        $(this).autocomplete({
            minLength: 1,
            source: $(this).data('autocomplete-source'),
            select: function (event, ui) {
                $(this).val(ui.item.value);
            }
        });
    });
}

//if you create new autocomplete element with some function 
function createAutocompleteElement() {
    var $control = $('<input />').data('autocomplete-source', [
        "Add the Data Source object here", "Value 1", "Source Value 2", "Source Value 3"]);

    return registerAutoComplete($control);
}

$(function () {
    //this below function sufficient to register autocomplete with specified selector
    registerAutoComplete($("[id^='requisition_material_items_attributes_'][id$='_item_name_autocomplete']"));

    /*// below setTimeout delay call back not required as it runs after dom ready.
    setTimeout(function () {
        registerAutoComplete($("[id^='requisition_material_items_attributes_'][id$='_item_name_autocomplete']"));
    }, 5000);
    */
});

---

---

我们应该为新插入的元素绑定autocomplete请提供更多上下文。如何使用Rails生成元素？是否使用AJAX？是否可以提供一个复制问题的非工作演示？@user938363能否请您将示例代码链接放到网上。@@chanchal，我们没有联机代码。html源代码有帮助吗？我们应该绑定新插入元素的自动完成请提供更多上下文。如何使用Rails生成元素？是否使用AJAX？是否可以提供一个不工作的演示来重现问题？@user938363是否可以将示例代码链接放在网上。@@chanchal，我们没有联机代码。html源代码是否有帮助？新元素的id为在插入之前未知。@user938363如何生成元素？该元素是由Rails 3.2生成和插入的，而不是由jquery完成。我们正在为新插入的元素初始化自动完成。下面是在Rails视图中将自动完成添加到元素的代码：tItem Name，：inputhtml=>{data:{autocomplete_source:SUBURI+base_materialx.autocomplete_parts_path}，：placeholder=>tEnter Part Name关键字，：required=>true%>@user938363在这种情况下，没有动态生成的元素客户端。文档已经准备好了。只需向元素添加一个通用类名，然后添加$'.aClassName'.autocomplete…新元素的id在插入之前是未知的。@user938363您怎么做您是否生成元素？该元素是由Rails 3.2生成和插入的，而不是由jquery完成。我们正在为新插入的元素初始化自动完成。下面是在Rails视图中将自动完成添加到元素的代码：tItem Name，：inputhtml=>{data:{autocomplete_source:SUBURI+base_materialx.autocomplete_parts_path}，：placeholder=>tEnter Part Name关键字，：required=>true%>@user938363在这种情况下，没有动态生成的元素客户端。文档已经准备好了。只需向元素添加一个通用类名，然后添加$'.aClassName'.autocomplete…使用autocomplete数据源生成和插入html代码就可以了Rails 3.2中的e。该视图是用Rails partial view.html.erb呈现插入的。我想我们可以跳过函数createautocompleteElement。我们正在为新插入的元素初始化autocomplete。您可以通过放置$function{registerAutoComplete'your-element-selector'}来运行registerAutoComplete；位于部分视图的末尾，以便它将自动完成注册到指定的选择器匹配的元素。是否有一些示例我们可以看一下？我们以前没有在Rails部分视图中使用脚本进行过此操作。看看这些答案，您会明白：使用自动完成数据源生成和插入html代码是在R中完成的ails 3.2.该视图是使用Rails部分视图.html.erb渲染插入的。我想我们

---

可以跳过函数createautocompleteElement。我们正在为新插入的元素初始化自动完成；在部分视图的末尾，以便它将自动完成注册到指定的选择器匹配元素。是否有一些示例我们可以看一下？我们以前还没有在Rails部分视图中使用脚本来完成这项工作