Пятница , Июль 21 2017

Функция jQuery.live

Начиная с версии 1.3 в jQuery появилась функция live, которая является аналогом функции bind и так же служит для назначения событий всем элементам, которые соответствуют выражению заданному в селекторе jQuery.

Основное отличие функции jQuery.live от jQuery.bind состоит в том, что bind действует только на объекты, которые существовали на момент вызова функции. Для объектов созданных позднее необходимо запускать bind повторно.

Функция jQuery.live лишена этого недостатка и будучи запущена один раз позволяет назначить события не только на созданные объекты, но и на те объекты, которые появятся позже.

Для иллюстрации сказанного, приведу небольшой пример:

<body>

<div class=»clickme»>

Click Here

</div>

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

$(‘.clickme’).bind(‘click’, function() {

// Обработчик события Click

});

Недостаток в том, что после того как будет добавлен дополнительный элемент, с тем же классом «clickme», созданный с помощью bind обработчик событий для него действовать не будет.

$(‘body’).append(‘<div class=»clickme»>Click here too</div>’);

Кому-то данное ограничение может показаться незначительным, но на самом деле это большая проблема. Ведь, для каждого нового элемента необходимо повторно назначать события, а это выливается в увеличение объема и сложности программы.

Появление новой функции jQuery.live значительно упрощает жизнь программиста и позволяет уменьшить сложность программы, а следовательно и риск ошибки.

Синтаксис функции аналогичен синтаксису команды bind:

.live(eventType, handler);

Поэтому единственное отличие между приведенным выше кодом для bind и кодом для live заключается в замене имени одной функции на другое:

$(‘.clickme’).live(‘click’, function() {

// Обработчик события Click

});

В дополнение хочу отметить, что начиная с версии jQuery 1.4.1 прототип функции live стал выглядеть иначе:

.live( eventType, eventData, handler )

EventData — это необязательный параметр, который предназначен для передачи в обработчик дополнительных данных.

Одновременно с этим изменением появилась возможность назначать несколько событий на один обработчик:

$(‘.clickme’).live(‘mouseover mouseout’, function() { if (event.type==’mouseover’) {

// обрабатываем mouseover

} if (event.type==’mouseout’) {

// обрабатываем mouseout

}

});

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *