Чи працює jQuery.on () для елементів, доданих після створення обробника подій? - jquery

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

Заздалегідь спасибі.

Відповіді:

.on() працює з динамічно створеними елементами, якщо він правильно використовується. The 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 вирішив, що це поганий спосіб зробити це, і краще вимагати від розробника вказати статичного предка, який, сподіваємось, ближче до фактичного цільового об'єкта, ніж об'єкта документа.

Я думаю, ти стикаєшся з подібною ситуацією, з якою я стикався. це досить вдале рішення для зв’язування подій з елементами, створеними пізніше.

Пов’язування подій Jquery на елементах, породжених за допомогою інших подій