JQuery – выполнение кода для каждого нового экземпляра объекта DOM
-
20-08-2019 - |
Вопрос
Мне интересно, возможно ли это в JQuery.
У меня есть код Javascript, который создает объекты DOM «на лету» в ответ на действия пользователя.Некоторые из этих объектов DOM имеют определенную структуру — контейнер всегда имеет один и тот же атрибут «класс».
Я хотел бы, чтобы каждый раз, когда создается новый экземпляр объекта DOM с классом «X», я хочу, чтобы выполнялся один и тот же фрагмент кода Javascript.Этот код добавит событие onclick к этому объекту DOM.
К сожалению, я не могу просто поместить код, который назначает onclick в document.Ready(), поскольку объекты, к которым он привязывается, создаются на лету, спустя много времени после выполнения document.Ready().
Позволяет ли JQuery настраивать постоянные привязки, которые будут автоматически привязываться к типу объекта DOM, даже если он создается на лету?
Решение
Раньше это покрывалось «живым», «делегированием» или иногда «привязкой».Теперь они заменены на «включено», однако есть некоторые предостережения, которые обсуждаются здесь: Сохранение привязки событий Javascript
Другие советы
Думаю, что, как ни удивительно, я нашел ответ на свой вопрос прямо в документации JQuery.
http://docs.jquery.com/Events/live#typefn
live( type, fn )
Добавлено в jQuery 1.3:Привязывает обработчик к событию (например, щелчку) для всех текущих и будущих соответствующих элементов.Также можно связывать пользовательские события.
Вы смотрели плагин jQuery под названием LiveQuery?
На странице документации LiveQuery:
Например, вы можете использовать следующий код, чтобы привязать событие Click со всеми тегами, даже любые теги, которые вы можете добавить через Ajax.
$('a')
> .livequery('click', function(event) {
> alert('clicked');
> return false;
> });
После того, как вы добавите новые теги в свой документ, живой запрос будет связывать событие Click, и больше ничего не нужно вызвать или сделать.
Невозможно в ядре jQuery (как вы, вероятно, поняли из других ответов, относящихся к некоторым плагинам)...это может быть очень простая задача, если вам не обязательно нужны все функции чего-то вроде livequery
Для браузеров, которые их поддерживают, используйте событие DOM уровня 2 — «DOMNodeInserted»:
http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents