javascript - jQuery 自动完成仅为第一个动态插入的元素初始化

Question

这是我们为动态插入的元素初始化自动完成 (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 代码以使其适用于第二个元素及其他元素？

更新

jQuery autocomplete for dynamically created inputs提供的解决方案(所谓的重复案例)在这里不起作用，因为它是针对不同的问题。在重复的情况下，通过在使用 JavaScript 生成新元素时添加自动完成的初始化来解决问题。在我们的例子中，新元素是由 Rails 生成的，生成时不能用自动完成初始化代码插入其中。在我们的例子中，自动完成适用于第一个插入的元素，而不适用于第二个元素。我们的问题是为第二个元素和之后的元素进行自动完成初始化。

更新

item_name_autocomplete 的 Rails View :

<%= 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  %>

Answer 1

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