.on() работает с динамически созданными элементами, если он используется правильно. jQuery doc довольно неплохо описывает его.
Способ использовать его для динамических элементов - использовать эту форму:
$("static selector").on('click', "dynamic selector", fn);
Статический селектордолжен разрешаться для некоторого объекта, который является и предком ваших динамических объектов и является статическим - присутствует при запуске этой строки кода и не будет удален или воссоздан.
Динамический селектор - это селектор, который соответствуетваши динамические элементы.Они не должны существовать во время первой установки обработчика событий, и они могут приходить и уходить так часто, как вы хотите.
Итак, если "#container" соответствует статическому предку, а ".foo" соответствует вашей динамическойэлементы, для которых вы хотите обработчики кликов, вы должны использовать это;
$("#container").on("click", ".foo", fn);
Если вы действительно хотите это понять, то именно так работает делегированная обработка событий .on().Когда вы выполняете вызов .on() выше, он прикрепляет обработчик события click к объекту #container.Некоторое время спустя, когда вы щелкаете по объекту .foo, на самом объекте .foo нет обработчика щелчка, поэтому щелчок всплывает в цепочке предков.Когда щелчок достигает объекта #container, появляется обработчик щелчка, и jQuery смотрит на этот обработчик и видит, что этот обработчик предназначен только для объектов, для которых исходный объект, на который щелкнули, соответствует селектору ".foo".Он проверяет цель события, чтобы определить, соответствует ли она этому селектору, и если да, то вызывает для нее обработчик события.
(в настоящее время не рекомендуется) метод .live(), работающий путем присоединения всех обработчиков событий к объекту документа.,Поскольку объект документа является предком каждого объекта в документе, они получили делегированное управление событиями таким образом.Итак, в приведенном выше примере эти два эквивалента:
$(document).on("click", ".foo", fn);
$(".foo").live("click", fn);
Но присоединение всех делегированных обработчиков событий к документу иногда создает серьезное узкое место в производительности, поэтому jQuery решил, что это плохой способ сделать это, и этоЛучше потребовать, чтобы разработчик указал статического предка, который, как мы надеемся, был ближе к реальному целевому объекту, чем объект документа.