LiveQuery – продолжение жизни после Ajax


В jQuery 1.3 и выше добавлено метод live, который добавляет обработчик событий всем элементам и поддерживает такие события, как: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress и keyup.

Но, к сожалению, этот метод .live() плохо "дружит" с Ajax и не всегда работает корректно. По этому приходится использовать один замечательный плагин Live Query.

Преимущество Live Query в том, что он при обновлении дерева DOM автоматически связывает элементы с обработчиком событий и нормально работает с новыми DOM элементами, полученными через Ajax.

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

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

Использовать тоже не сложно.
Например, нам нужно получить value пункта в списке <OPTION> из контейнера <SELECT> с id=”myselect”, где сам список подгружается с помощью Ajax.

Делается это так:

$("#myselect").livequery(function(){
$(this).change(function() {
alert(this.value);
});
});

Или более изящней:

$("#myselect").livequery("change", function() {
alert(this.value);
});

В результате при выборе одного пункта из списка <SELECT> появится сообщение с его значением value.

Пример 2. При наведении курсора (mouseover) на элемент с id=”alert” вывести сообщение: "Получил курсор!". А после того, как уберем курсор (mouseout), вывести: "Потерял."

Решение:

$("#alert").livequery(function(){
$(this).hover(function() {
alert("Получил курсор!");
}, function() {
alert("Потерял.");
});
});

Так что если у вас не работает onchange в Internet Explorer (IE) или какие-то проблемы с элементами полученными через Ajax, пользуйтесь Live Query!

Посмотреть пример работы Live Query.

Скачать пример с плагинов Live Query.

, ,

1 Star2 Stars3 Stars4 Stars5 Stars (голосов 5, в среднем: 4.80 из 5)
Loading ... Loading ...


  1. #1 tester - Август 1st, 2010 at 00:53

    ХОтелось бы знать актуально ли еще использование livequery после выхода jQuery 1.4 версии, с учетом что метод live делался еще в 1.3 версии ?

  2. #2 nice - Август 1st, 2010 at 07:59

    Хороший вопрос, но к сожалению в 1.4 еще не проверял. Если они доработали live то конечно это не актуально.

  3. #3 web - Апрель 29th, 2011 at 07:39

    не актуально. jQuery 1.5.2

  4. #4 zen - Август 22nd, 2012 at 17:40

    SyntaxHighlighter – плохой выбор для подсветки синтаксиса.

  5. #5 Александр - Сентябрь 28th, 2012 at 08:11

    В jQuery 1.8 метод .live() отлично работает с элементами подгруженными через ajax

  6. #6 LoyZ - Январь 13th, 2013 at 07:16

    Александр :
    В jQuery 1.8 метод .live() отлично работает с элементами подгруженными через ajax

    Ну скажем так, live() в в 1.8 не кошерно, она нерекомендована, прекрасно работает on().

(will not be published)

Spam Protection by WP-SpamFree Plugin

  1. No trackbacks.