В 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.
