среда, 5 марта 2008 г.

jQuery binding events problem

При использовании ajax запросов и изменении DOM дерева налету не всегда срабатывают функции-обработчики событий для добавленных элементов в документе. Пример:

// Получаем html код и вставляем его в div
$("#grid_toolbar").load("./ajax/toolbar_menu/users.inc");

// Задаем обработчик для нового элемента
$("#delete").click(function() {
$("#grid").empty();
});Syhi-подсветка кода


Такой способ, к сожалению, не будет работать.
В этой ситуации поможет специальный плагин livequery: http://docs.jquery.com/Plugins/livequery

Подключаем единственный файл jquery.livequery.js и переписываем код:

// Загружаем также ;-)
$("#grid_toolbar").load("./ajax/toolbar_menu/users.inc");

// А здесь уже задаем обработчики при помощи livequery
$("#delete").livequery('click', function(event) {
    $("#grid").empty();
});Syhi-подсветка кода




3 комментария:

ROM комментирует...

Можно сделать и без плагина собственной функцией с обновлением событий. Сделано, проверено - работает =)

unknown комментирует...

Код - в студию!!! ;-)

PiVolan комментирует...

Поделись кодом!