Ответ 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 решил, что это плохой способ сделать это, и было бы лучше потребовать от разработчика указать статического предка, который, мы надеемся, ближе к фактическому целевой объект, чем объект документа.