Правильный метод вызова .each на динамически создаваемые элементы?

Question

Исходя из ответа здесь https://stackoverflow.com/a/1207393/1786228 и теперь довольно старый JQuery плагин (http://www.erichynds.com/jquery/jquery-create-event/)

Что такое правильное событие для on поймать, когда создаются новые элементы? Например, у меня есть поля ввода, в которых я устанавливаю typeahead/autocomplete. Я делаю это с:

$(.input_box).each(function() { 
    // set stuff here 
    // setup options etc 
    // apply autocomplete plugin to element (this is a jQuery plugin) 
    var ac = $(this).autocomplete(acOptions); 
}); 

У меня есть кнопка, позволяющая добавить в форму несколько одинаковых полей ввода. Как я могу назвать эту функцию .each только для нового поля ввода? Если я снова использую $(.input_box).each..., в исходных боксах добавлен плагин второй раз.

В основном я хочу сделать ниже, но нет привязки к «созданию».

$(document).on("create", "input_box", function(e) { 
    // set stuff here 
    // setup options etc 
    // apply autocomplete plugin to element (this is a jQuery plugin) 
    var ac = $(this).autocomplete(acOptions); 
}); 

Есть ли такое событие? Если нет, каков наилучший способ достижения этого?

Answer 1

Как упоминалось выше: вы можете использовать события мутации. Но эти события имеют некоторые ограничения: нет поддержки IE до версии 9, и есть некоторые проблемы с производительностью с этими событиями. В вашем случае вы должны будете прослушать DOMNodeInserted. Возможный пример:

document.addEventListener("DOMNodeInserted", function(event){ 
    var target = event.srcElement || event.target; 
    if (target && target.tagName.toLowerCase() == 'input') { 
     // do what you want to do here.... 
    } 
}); 

То, что я предпочел бы в вашем случае немного проще: Положите вашу логику инициализации в отдельной функции и каждый раз вызывать эту функцию после того, как манипулировать DOM. Внутри этой функции добавить значение класса или данных для каждого элемента, который инициализируется и проверить для этого класса, чтобы убедиться, что вы инициализировать только один раз:

function init() { 
    $('.input_box').not('.initialized').each(function() { 
     var ac = $(this).addClass('initialized').autocomplete(acOptions); 
    }); 
}