Добавление элементов в DOM с помощью ajax и поддержание jQuery

Question

У меня всегда была проблема, если элементы, добавленные в DOM через AJAX, похоже, не привязаны к соответствующим обработчикам jQuery.on(). Поэтому я закончил с повторным добавлением событий к ним в полной функции AJAX.

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

Answer 1

В jQuery существуют различные типы привязок событий.

Код ниже будет приложить click событие только для имеющихся в настоящее время элементы DOM, а также при удалении или повторном добавлении элементов, событие будет работать не более

$(".myElement").on("click", function() { 
    console.log("Clicked!"); 
}) 

метод ниже будет присоединять click событие ко всем элементам с данным селектором для всего жизненного цикла DOM, независимо от добавления и удаления элементов сколько угодно раз.

$(document).on("click", ".myElement", function() { 
    console.log("Clicked!"); 
}) 

Answer 2

Какую версию jQuery вы используете?

Раньше до 1.9 существовал jQuery.live() - API docs link, чтобы добавить обработчики событий к элементам, которые еще не существовали в DOM. Но так как 1.7 jQuery.on() - API docs link работает таким же образом.

Answer 3

Как вы использовали on? Какова версия jQuery, которую вы используете? вместо on, вы также можете использовать delegate. here больше информации о delegate