Jquery Autocomplete Does Not Respond To Dynamically Inserted Element

We are working on autocomplete with dynamically inserted elements with jquery (did autocomplete on static elements before). Here is the html source code for one autocomplete added

Solution 1:

setTimeout solves the problem:

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

Solution 2:

you can put the onload code in a function, so when you create new content, you fire the function onload again...

$(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() againreturnAccess();
}
returnAccess();
});

so when you create new content, you fire returnAccess() again... even you can put your function createContent inside return access if the new content execute too the create content...