JQuery срабатывающие недавно добавленный HTML код

Question

Пример Я имел 2 HTML вход

<div class="wrap">   
    <input class="autocomplete" name="auto_1" /> 
    <input class="autocomplete" name="auto_2" /> 
</div> 

auto_1 и auto_2 использует автозаполнение с помощью JQuery UI и срабатывает, когда документ готов $(function(){})

И затем, если нажать на кнопку на моем веб-сайте появится еще одна кнопка. Добавлена ​​функция $('.wrap').append('<input class="autocomplete" name="auto_3" />')

А теперь всего будет 3 вход

<div class="wrap">   
    <input class="autocomplete" name="auto_1" /> 
    <input class="autocomplete" name="auto_2" /> 
    <input class="autocomplete" name="auto_3" /> 
</div> 

Но функция автозаполнения не работает на auto_3, потому что он недавно добавил.

Как заставить его работать/использовать автозаполнение?

Answer 1

Я думаю, что проблема не связана с с лизать новый вход, но с автозаполнением на новом входе. При добавлении нового элемента с

$('.wrap').append('<input class="autocomplete" name="auto_3" />') 

Вы должны приложить автозаполнения к этой новой области, так

$('input[name="auto_3"]').autocomplete(); 

Или сделать автозаполнение с livequery плагин: https://stackoverflow.com/a/4551313/657584

Answer 2

Использование .on(): http://api.jquery.com/on

$('.wrap').on('click', '.autocomplete', function(){ 
    // your code here 
    // $(this).autocomplete(); // or whatever. 
}); 

Используя метод .on() делегировать свой обработчик щелчка на несуществующие и будущие элементы, которые будут добавлены к DOM, что-то вроде (недавно) устаревшую (от JQ 1,7) .live()

от DOCS:

$("a.offsite").live("click", function(){ alert("Goodbye!"); }); // jQuery 1.3+ 
$(document).delegate("a.offsite", "click", function(){ alert("Goodbye!"); }); // jQuery 1.4.3+ 
$(document).on("click", "a.offsite", function(){ alert("Goodbye!"); }); // jQuery 1.7+