BlogGitHub

«Живые» события

Я тут немного забегу вперёд, так что если чего стало непонятно, отложите данный раздел «на потом».

Стоит обратить внимание на ещё одну задачку, которая очень часто ставится перед разработчиком – это добавление обработчиков событий для элементов, которые добавляются на страницу динамически. Пожалуй, надо привести пример подобной задачи:

– У нас есть HTML-страница, на которой все внутренние ссылки будут подгружаться через AJAX, данное утверждение справедливо и для подгружаемого HTML тоже.

Первое условие решается просто:

$("a[href^=\\/]").on("click", function() {
    var url = $(this).attr("href");
    $("body").load(url + " body > *");
    return false;
});

Для наглядности условимся, что внутренние ссылки содержат относительные пути от корня сайта.

Со вторым условием чуть-чуть посложнее ситуация, но тоже вполне решаема:

$("body").on("click", "a[href^=\\/]", function() {
    var url = $(this).attr("href");
    $("body").load(url + " body > *");
    return false;
});

Отличий не так уж и много, проясню происходящее:

  • первым делом на элемент <body> будет повешен обработчик события click

  • данный обработчик будет срабатывать только в том случае, когда событие будет относиться к элементу

Работа данной схемы базируется на «всплытии» событий, так что, используя метод event.stopPropagation(), вы сможете предотвратить выполнение «живых» обработчиков.

Лирическое отступление к истории: жил да был когда-то плагин для jQuery, назывался «live», позволял он вешать обработчики на элементы DOM-дерева, которых ещё нет (подгружаемые через AJAX или ещё как), а потом он умер его внесли в само ядро. Метод live() к тому времени работал лишь с document. Затем появился метод delegate(), который научился вешать обработчик на произвольный элемент, а затем и он был поглощён методом on(). Так что не пугайтесь сильно, если встретите старый метод live(), адаптировать под новые версии jQuery его будет не так уж и сложно (ну, я на это надеюсь).

PreviousПространство именNextTouch-события

Last updated