jQuery: live () и делегат () - PullRequest
Новая
       29

jQuery: live () и делегат ()

4 голосов
/ 10 января 2012

Я связываю событие click с элементом div, который создается после нажатия кнопки. Я использую .live (), и это работает. Я слышал, что я не должен использовать .live, но .delegate (). Итак, я попробовал, но это не работает, но .live работает.

Мой рабочий jQuery: 

$(".myDiv").live("click",function () {
    var Pos = $(this).offset();
    $("#Container").css("left", Pos.left).css("top", Pos.top);
});

Не работает jQuery: 

$(".myDiv").delegate("div","click",function () {
    var Pos = $(this).offset();
    $("#Container").css("left", Pos.left).css("top", Pos.top);
});

Мой HTML для div 

<div class="myDiv"></div>

Может кто-нибудь сказать мне, почему делегат не работает для меня?

Ответы [ 3 ]

6 голосов
/ 10 января 2012

По состоянию на 1.7 .live() устарела, а .delegate() заменена на .on () 

$("body").on("click","div.myDiv",function () { 
    var Pos = $(this).offset(); 
    $("#Container").css("left", Pos.left).css("top", Pos.top); 
});

.on() теперь является супер связующим;)

Попробуйте привязать ближайшую вещь к вашей цели, которая обязательно будет содержать ее, предпочтительно что-то с идентификатором: 

<div id="mainContent">
    <div class="myDiv"></div><!-- Dynamically created div -->
</div>

отличная цель здесь будет # mainContent 

$("#mainContent").on("click","div.myDiv",function () { 
    var Pos = $(this).offset(); 
    $("#Container").css("left", Pos.left).css("top", Pos.top); 
});
4 голосов
/ 10 января 2012

Ваша ошибка в том, что вы неправильно указываете, какие элементы должны запускать обработчик события (используя селектор в первом параметре delegate), а какой родительский элемент отвечает за запуск события (используя селектор в jQuery объект, который начинает цепочку).

Правильный путь - это что-то вроде 

$("body").delegate("div.myDiv","click",function () { 
    var Pos = $(this).offset(); 
    $("#Container").css("left", Pos.left).css("top", Pos.top); 
});

См. примеры для делегата .

Для jQuery 1.7 и выше, delegate (вместе со всеми другими методами привязки событий) был заменен методом on, который будет использоваться точно таким же образом: 

$('body').on('click','div.myDiv',function() {
    // ...
});
1 голос
/ 10 января 2012

Хотя вы должны рассмотреть возможность перехода на .on () , если вы используете 1,7+, вот ответ на ваш вопрос делегата:

jQuery live () по существу связывает обработчик событий со всем объектом widow.document, который запрашивает каждое событие (которое соответствует вашему заданному типу события), если источник соответствует вашему селектору.Если это так, то он уволит обработчик.Это позволяет обрабатывать события, происходящие от динамически добавленных элементов.

jQuery делегат () аналогичен live () за исключением того, что вы можете указать селектор для контейнера, а не простоwindow.document.Это означает, что вы будете опрашивать источник меньшего числа событий, что приведет к повышению производительности.

Если вы хотите точно воспроизвести поведение live (), перейдя на делегат (), 

$(selector).live('eventType', handlerFunc);

Становится: 

$(document).delegate(selector, 'eventType', handlerFunc);

Важно отметить, что вы ничего не получаете, сохраняя $ (document) в вызове делегата ().Вам следует изменить этот селектор на более конкретный контейнер, в котором будут создаваться ваши динамические элементы.

...