live: новый способ задать обработчик события

    imageКак известно, недавно вышла бета версия jQuery 1.3. Пока она сырая, тестируется, и в ней еще есть неприятные баги. Но знакомится с нововведениями стоит и я хотел бы кратко рассказать об одном из них.

    Функция «live» представляет собой аналог функции bind, по синтаксису и сути они идентичны, но между ними есть одно огромное различие, которое лучше всего демонcтрирует следующий пример.

    Попробовать демо. Пояснения под катом.


    В примере два набора кнопок, нажатие первых обрабатывается функцией назначенной через bind, вторых — через live.
    При динамическом добавлении кнопок мы можем наблюдать основное отличие: в первом наборе новые кнопки не получают обработчика, во втором обработчик автоматически добавляется для каждой новой кнопки.

    И хотя отличия в коде невелики:
          $("input.test").bind("click", function() {
            alert("hello base input!");
          });
          $('input.lcmd').live("click", function() {
            alert("hello live input!");
          });

    * This source code was highlighted with Source Code Highlighter.

    по факту мы имеем огромную разницу.

    PS: ранее подобный функционал можно было получить через этот плагин.

    PPS: во время тестирования столкнулся с багом, который показывает насколько 1.3 еще сыра:
    если указать сложный селектор $('#lblock input.lcmd').live(..., то обработчик не навесится вообще, причем, при замене на bind все работает прекрасно. Ждем исправлений в следующих версиях.

    PPPS: а вот $('input.lcmd', $('#lblock')).live(… работает, что, в общем, не удивительно
    Поделиться публикацией

    Похожие публикации

    Комментарии 26
      +2
      отличное улучшение. а то приходилось прибегать к различным сложностям для реализации live
      и надеюсь это не одно улучшение 1.3. Хотелось бы еще работы с адресной строкой и куками
        0
        Улучшения 1.3 были описаны на «Хабре» несколько дней назад. Поищите.
          +2
          я больше скажу, в этой заметке есть даже ссылка на тот пост :)
            0
            я его прочитал, к сожалению, видать не будет работы с урлом и куками((
              –1
              все фичи пока не описаны, все может измениться
        0
        Да, эта новая функция позволит изначально задать функциональность для типов элементов на странице, а затем выстраивать из них интерфейс. Такой путь конечно будет более универсальным и удобным.
          –1
          скорее, она позволит не думать о функционале при изменении DOM
          ведь все равно функционал, по хорошему, задается в $(document).ready, когда уже весь базовый интерфейс построен
            0
            Это делает более удобным динамическое построение дерева. Я это имел в виду.
              –1
              согласный
              0
              Кстати о $(document).ready.
              Недавно я выяснил что в Хроме(в сафари не тестил) $(document).ready происходит до подгрузки css. Т.е. если в каком-нибудь main.css у нас установлен фиксированный размер блока #content {width:550px;}, то $(document).ready(function() { alert($('#content').width();) }); покажет значение отличное от 550px. Получается $(document).ready не так хорош, жедем $(css).ready :). А пока я выкрутился засунув $(document).ready в js файл и поставил после загрузки css. Вариант неахти, но уж больно сроки жали.
              • НЛО прилетело и опубликовало эту надпись здесь
              0
              Лаконичный подход. Интересно, будет ли он так же скор, медленнее или быстрее, чем применение динамического навязывания или перехвата события у родительского элемента?
                0
                перехвата события у родительского элемента
                По идее, именно так это и работает:
                Works by adding an event handler to the root document element itself and relying on event bubbling.
                Simon Willison
                –1
                отписал багрепорт на groups.google.com/group/jquery-dev
                с примером habradigest.ru/garbage/jq/HTMLPage3.htm

                подожду ответа, но похоже live вернули в доработку
                  0
                  Был такой плагин livequery, я его использовал для своего сайта как раз из-за этой проблемы.
                  А теперь это в ядре. Круть, минус 2 килобайта при загрузке страницы )
                    –1
                    вы будете удивлены, но в статье есть ссылка на livequery :)
                      0
                      Я действительно удивлён.
                      0
                      А дело было так
                      $('.link a').livequery('click',function(){ alert('Weaboo!') });
                      0
                      .live это просто отлично. Конечно, костыли для этого уже давно подобраны, но нет ничего лучше, чем костыли, уже встроенные в базовый набор :)
                        0
                        был еще Intercept
                          0
                          jQuery.Listen пока никто не отменял, но если будет работать без плагина — я, конечно, за live.
                            +1
                            Как они, интересно, выкрутятся при использовании события 'change', для селектбокса, например, т.к. это событие не «баблится».
                              0
                              Обработчик не создаётся для каждой новой кнопки, не обманывайте. Используется один общий обработчик.
                                –1
                                спасибо за замечание, обманывать никого не хотел
                                вы узнали из исходных кодов как работает live или есть другой источник информации?
                                  0
                                  Извините, забыл поставить смайлик.

                                  Код не смотрел, но есть такая вещь, как презумпция вменяемости авторов jQuery :)
                                    0
                                    Именно так работает livequery, если мне не изменяет склероз.

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

                                Самое читаемое