Функции jquery не работают на элементах dom, загруженных асинхронно

Question

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

Прав ли я в своих наблюдениях? Как мне добиться этой функциональности?

Answer 1

Если вы хотите, чтобы обработчики событий работали с динамически добавленным контентом, вам нужно использовать on

$(document).on("click", "someCssSelector", function(){
    //your code here
});

Конечно, это приведет к тому, что будут отслеживаться все клики в любом месте вашей страницы.Чтобы быть более эффективным, посмотрите, можете ли вы структурировать свою страницу так, чтобы все эти элементы, чье событие click вы хотите обработать, были в одном контейнере.то есть, если все эти элементы будут добавлены в div с идентификатором foo, вы бы написали выше более эффективно как

$("#foo").on("click", "someCssSelector", function(){
    //your code here
});

---

Если вы используете jQuery<1.7, вы бы использовали делегата </p>

$(document).delegate("someCssSelector", "click", function(){
    //your code here
});

Answer 2

Прав ли я в своих наблюдениях?

Да.

Как мне добиться этой функциональности?

Использование.on функция для подписки на эти обработчики событий, если вы используете jQuery 1.7 +:

$(document).on('click', '.someSelector', function() {
    ...
});

или используете функцию .delegate, если выиспользуя более старую версию (выше 1.4.3):

$(document).delegate('.someSelector', 'click', function() {
    ...
});

Для обоих вы можете использовать более конкретный корень, чем document, чтобы повысить производительность, если вы знаете, что эти элементы будут добавлены в некоторый контейнер дляпример.

И если вы используете какую-то доисторическую версию, вы можете пойти с .live():

$('.someSelector').live('click', function() {
    ...
});