Что лучше, связать после обновления или live () (jQuery)? - PullRequest
Новая
       3

Что лучше, связать после обновления или live () (jQuery)?

3 голосов
/ 07 февраля 2012

Я обновляю контейнер с помощью AJAX. Какой из них лучше с точки зрения производительности? Псевдо-код: 

$.post('get_something.php',function(data){
    $('#container').html(data).find('a').bind('click',function(){
        console.log('Doh!');
    });
});

Или это? 

$('#container a').live('click',function(){
    console.log('Doh!');
});

$.post('get_something.php',function(data){
    $('#container').html(data);
});

Ответы [ 3 ]

6 голосов
/ 07 февраля 2012

Во-первых, я бы вообще не рекомендовал использовать live (а команда jQuery устарела).Я бы использовал delegate (или новую версию on) с более целевым контейнером (в вашем случае, #container), чем документ в целом.

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

Однако есть и другие соображения, которые нужно рассмотреть.Предположим, у нас есть эта разметка: 

<div id="container">
    <div id="wrapper">
        <a>A link</a>
    </div>
</div>

... и этот код: 

$("#container").delegate('a', 'click', function() {
    // Do something with the click
    console.log("Link was clicked");
});
$("#wrapper").click(function() {
    return false;
});

Поскольку a является самым глубоким элементом, можно ожидать нажатия на a должен обрабатываться первым обработчиком и видеть запись console.log.Но вы этого не сделаете, потому что на самом деле щелчок не обрабатывается до тех пор, пока не достигнет контейнера - и в этом случае он не достигнет контейнера, потому что промежуточный элемент оболочки останавливает событие.

Это не минус (я нахожу delegate чрезвычайно полезным и использую его все время), это просто то, что нужно учитывать, когда вы разрабатываете, как вы справляетесь с вещами.

2 голосов
/ 07 февраля 2012

Из двух, первый вариант. Тем не менее, лучше, чем оба они delegate()

$("#container").delegate(".filter", "click", function() {
    // do something on click of .filter element.
});
1 голос
/ 07 февраля 2012

К вашему сведению в нем говорится

"В конце концов, связывание кажется намного более ясным и более прямым, не так ли? Ну, есть две причины, по которым мы предпочитаем делегировать или жить связывать:

  • Чтобы прикрепить обработчики к элементам DOM, которые еще не существуют в DOM, поскольку привязка напрямую привязывает обработчики к отдельным элементам, она не может привязывать их к элементам, которых нет на странице.пока. Если вы должны были запустить $ ('a'). bind (...), а затем новые ссылки были добавлены на страницу через AJAX, ваш обработчик связывания не будет работать для них. live и делегат с другой стороныпривязан к другому узлу-предку, поэтому он будет работать для любого элемента, существующего сейчас или в будущем в этом элементе-предке.

  • Или для присоединения обработчика к одному элементу или небольшой группе элементовпрослушивание событий на дочерних элементах вместо циклического прохождения и присоединения одной и той же функции к 100 отдельным элементам в DOM. Это было бы преимуществом производительности при подключении обработчика к одному (илинебольшая группа элементов-предков вместо непосредственного присоединения обработчиков ко всем элементам на странице.«

источник ответа

...