Question

我们正在使用jquery动态插入元素进行自动完成（之前在静态元素上自动完成）。这是插入的一个自动完成添加元素的html源代码（可能在同一页面上插入了多个元素）。插入元素的id在插入之前是未知的。 ids因元素而异：

<input type="text" size="50" placeholder="Enter keyword" name="requisition[material_items_attributes][1414037215952][item_name_autocomplete]" id="requisition_material_items_attributes_1414037215952_item_name_autocomplete" data-autocomplete-source="/whs/items/autocomplete" class="string required span5">

以下是自动填充的js代码：

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

在item_name_autocomplete的文本框中输入关键字时，没有任何反应。我们发现自动完成的js代码没有被执行，并且没有id的匹配。什么可能导致不匹配？是因为动态元素需要在匹配之前重新加载（不知道如何在这里使用。或者还有其他一些方法来重新加载）？

Answer 1

setTimeout解决了这个问题：

 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);

Answer 2

你可以将onload代码放在一个函数中，所以当你创建新内容时，你再次激活函数onload ...

$(document).ready(function() {
function returnAccess(){
//all your code when the page load
//all the code you need to run like events or something else...
}
function createContent(){
//code that create content
//then you run returnAccess() again
returnAccess();
}
returnAccess();
});

因此，当您创建新内容时，再次触发returnAccess（）... 如果新内容也执行创建内容，即使你可以将你的函数createContent置于返回访问权限中......

jquery autocomplete不响应动态插入的元素

2 个答案: