Месяц назад в блоге была опубликована статья «Обработка событий для элементов DOM, загружаемых через ajax» (ее стоит прочитать, чтобы быть в курсе), в комментариях к которой многие поделились своими способами решения проблемы. Среди прочих было упоминание плагина Live Query о котором сегодня и пойдет речь.
Плагин Live Query использует возможности селекторов jQuery для связывания событий или вызова функций-обработчиков для выбранных элементов автоматически, при обновлении дерева DOM.

Подключив плагин к странице

<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/jquery.livequery.js"></script>

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

$("p").livequery("click", function() {
  alert($(this).text());
});

Клик по параграфу приведет к тому, что в alert’е будет выведен текст, содержащийся в этом параграфе.

Вот пример, где Вы сможете испытать работу плагина. Попробуйте покликать по параграфам, как по изначально существующим, так и по добавленным с помощью ajax-запроса. Затем попробуйте удалить обработчики события, кликнув по соответствующей кнопке.

Но это не все возможности плагина Live Query. Мы познакомимся с некоторыми методами, которые предлагает плагин и начнем с метода livequery(type, fn), который был использован в примере.

livequery(type, fn) – связывает обработчик события, определенный в параметре fn, с событием, указанным в параметре type. В этом параметре можно указать любое событие jQuery. Функция-обработчик будет вызвана для каждого элемента набора, к которому применен метод livequery. Любой элемент, если он при появлении в DOM будет соответствовать тому селектору jQuery, с помощью которого создавался набор, автоматически будет связан с существующим обработчиком события. Как только элемент перестает соответствовать селектору – он потеряет и обработчик.

expire( ) – этот метод удаляет все события и их обработчики, связанных с элементами набора к которому применен метод.

expire( type ) – позволяет удалить только обработчики для события, определенного в параметре type.

expire( type, fn ) – позволяет удалить обработчики, определенные в параметре fn для события, определенного в параметре type.

Кстати, обнаружил, что первые статьи появились в блоге ровно год назад – так что «С Днем Рождения, блог!».

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal