JQuery - выполнение кода для каждого нового экземпляра объекта DOM

Question

Мне интересно, возможно ли это в JQuery.

У меня есть некоторый код Javascript, который создает объекты DOM на лету в ответ на действия пользователя. Некоторые из этих объектов DOM имеют определенную структуру - контейнер всегда имеет один и тот же атрибут «класс».

Что я хотел бы сделать, так это то, что каждый раз, когда создается новый экземпляр объекта DOM с классом «X», я хочу, чтобы выполнялся один и тот же фрагмент кода Javascript. Этот код добавит событие «onclick» к этому объекту DOM.

К сожалению, я не могу просто поместить код, назначающий onclick, в document.Ready (), поскольку объекты, к которым он привязан, создаются на лету, еще долго после того, как document.Ready () был выполнен.

Позволяет ли JQuery устанавливать постоянные привязки, которые будут автоматически привязываться к типу объекта DOM, даже если он генерируется на лету?

Answer 1

Кажется, я нашел ответ на свой вопрос прямо в документации JQuery, как ни странно.

http://docs.jquery.com/Events/live#typefn

live( type, fn )

Добавлено в jQuery 1.3: привязывает обработчик к событию (например, нажатию) для всех текущих и будущих элементов. Может также связывать пользовательские события.

Answer 2

Вы смотрели плагин jQuery под названием LiveQuery ?

Со страницы документации LiveQuery:

Например, вы можете использовать следующий код для привязки события клика ко всем тегам A, даже любым тегам A, которые вы может добавить через AJAX.

$('a') 
>     .livequery('click', function(event) { 
>         alert('clicked'); 
>         return false; 
>     });

После добавления новых тегов А документ, Live Query свяжет событие клика и больше ничего нет это нужно назвать или сделать.

Answer 3

Раньше на него ссылались «live», «делегат» или иногда «bind». Теперь они заменены на «вкл», однако есть некоторые предостережения, как обсуждено здесь:

Answer 4

Невозможно в ядре jQuery (как вы, вероятно, поняли с другими ответами, ссылающимися на некоторые плагины) ... это может быть очень простой задачей, если вам необязательно нужна вся функциональность, например, livequery

Для браузеров, которые их поддерживают - используйте событие DOM level 2 - 'DOMNodeInserted':

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents