Подтвердить что ты не робот

Работает ли jQuery.on() для элементов, которые добавляются после создания обработчика событий?

Я все время находился под впечатлением, что .on() работал как .live() в отношении динамически созданных элементов (например, я использую $('.foo').on('click', function(){alert('click')});, а затем элемент с классом foo создается из-за некоторого AJAX, теперь я ожидаю щелчок по этому элементу, чтобы вызвать предупреждение). На практике это были не те результаты, которые я получил. Я могу ошибаться, но может кто-нибудь помочь мне понять новый способ достижения этих результатов, после .on()?

Спасибо заранее.

4b9b3361

ОТВЕТЫ

Ответ 1

.on() работает с динамически создаваемыми элементами, если он используется правильно. jQuery doc неплохо описывает его.

Способ использования для динамических элементов заключается в использовании этой формы:

$("static selector").on('click', "dynamic selector", fn);

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

Динамический селектор - это селектор, который соответствует вашим динамическим элементам. Они не должны существовать в то время, когда обработчик событий впервые установлен, и они могут приходить и уходить так часто, как вы хотите.

Итак, если "#container" соответствует статическому предку, а ".foo" соответствует вашим динамическим элементам, на которые вы хотите включить обработчики кликов, вы должны использовать это:

$("#container").on("click", ".foo", fn);

Если вы действительно хотите это понять, так работает обработка делегированных событий .on(). Когда вы делаете вызов .on() выше, он прикрепляет обработчик события клика к объекту #container. Когда-нибудь позже, когда вы нажмете на объект .foo, на фактическом объекте .foo не будет обработчика кликов, так что клик пузырится по цепочке предков. Когда клик попадает в объект #container, есть обработчик кликов, и jQuery смотрит на этого обработчика и видит, что этот обработчик предназначен только для объектов, где исходный объект, нажавший на объект, соответствует селектору ".foo". Он проверяет цель события, чтобы убедиться, что он соответствует этому селектору, и если это так, он вызывает для него обработчик событий.

Метод (теперь устарел) .live() работал, привязывая все обработчики событий к объекту документа. Поскольку объект документа является предком каждого объекта в документе, они получили делегированную обработку событий таким образом. Итак, в приведенном выше примере эти два эквивалента:

$(document).on("click", ".foo", fn);
$(".foo").live("click", fn);

Но, прикрепляя все делегированные обработчики событий в документе, иногда создавалось серьезное узкое место в производительности, поэтому jQuery решил, что это плохой способ сделать это, и было бы лучше потребовать от разработчика указать статического предка, который, мы надеемся, ближе к фактическому целевой объект, чем объект документа.