Подтвердить что ты не робот

Jquery.live('click') vs .click()

Мне интересно, есть ли какие-либо обстоятельства, когда было бы лучше использовать .click(function {...});, а не .live('click', function {...});?

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

EDIT: Другая часть этого вопроса. Если я асинхронно загружаю все javascript в,.click все равно будет загружать все элементы, которые уже находятся в dom. Правильно?

4b9b3361

ОТВЕТЫ

Ответ 1

Бывают случаи, когда вы явно хотите назначить обработчик кликов только тем объектам, которые уже существуют, и обрабатывать новые объекты по-разному. Но чаще, живые не всегда работают. Он не работает с закодированными операторами jQuery, такими как:

$(this).children().live('click',doSomething);

Для правильной работы селектора требуется правильная работа из-за того, как события пузыряют дерево DOM.

Изменить: Кто-то просто поддержал это, поэтому очевидно, что люди все еще смотрят на него. Я должен указать, что live и bind оба устарели. Вы можете выполнять как .on(), причем IMO - гораздо более четкий синтаксис. Чтобы заменить bind:

$(selector).on('click', function () {
    ...
});

и заменить live:

$(document).on('click', selector, function () {
    ...
});

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

Ответ 2

( Примечание 29/08/2017: live устарели многие версии назад и удалены в версии 1.1. delegate устарел в версии 3.0. В обоих случаях используйте делегирование подпись on вместо [также рассматривается ниже].)

live происходит, захватывая событие, когда оно всплывает до DOM до корня документа, а затем смотрит на исходный элемент. click происходит путем захвата события на самом элементе. Поэтому, если вы используете live, и один из элементов-предков напрямую связан с событием (и не позволяет ему продолжать пузыриться), вы никогда не увидите событие на своем элементе. В то время как обычно элемент, ближайший к событию (щелчок или что-то еще), сначала захватывает его, сочетание событий live и не live может изменить это тонким образом.

Например:

jQuery(function($) {

  $('span').live('click', function() {
    display("<tt>live</tt> caught a click!");
  });

  $('#catcher').click(function() {
    display("Catcher caught a click and prevented <tt>live</tt> from seeing it.");
    return false;
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});
<div>
  <span>Click me</span>
  <span>or me</span>
  <span>or me</span>
  <div>
    <span>I'm two levels in</span>
    <span>so am I</span>
  </div>
  <div id='catcher'>
    <span>I'm two levels in AND my parent interferes with <tt>live</tt></span>
    <span>me too</span>
  </div>
</div>
<!-- Using an old version because `live` was removed in v1.9 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

Ответ 3

Все объекты, которые будут связаны с .click, должны существовать, когда вы устанавливаете событие.

Пример: (в псевдокоде) append может быть $("body").append() например

append('<div id="foo" class="something">...</div>');
$("div.something").click(function(){...});
append('<div id="bar" class="something">...</div>');

Щелчок работает для foo, но не работает для строки

Пример 2:

append('<div id="foo" class="something">...</div>');
$("div.something").live("click",function(){...});
append('<div id="bar" class="something">...</div>');

click работает для foo и bar

С .live('click'... вы можете динамически добавлять дополнительные объекты после создания события, и событие click будет по-прежнему работать.

Ответ 4

"live" необходим, когда вы динамически генерируете код. Посмотрите приведенный ниже пример:

$("#div1").find('button').click(function() {
    $('<button />')
     .text('BUTTON')
     .appendTo('#div1')
})
$("#div2").find('button').live("click", function() {
    $('<button />')
     .text('BUTTON')
     .appendTo('#div2')
})
button {
  margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id="div1">
  <button>Click</button>
</div>
<div id="div2">
  <button>Live</button>
</div>

Ответ 5

Всегда используйте click, если вы не динамически добавляете элементы.

live работает, добавляя прослушиватель событий к корню документа и прослушивая события с пузырьками. Альтернативой является delegate, который работает одинаково, но привязывает обработчик события к указанному элементу.
Таким образом, событие не должно пузыриться по всему DOM и уловлено раньше.

Ответ 6

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

Ответ 7

Поскольку "live" будет обрабатывать события для будущих элементов, которые соответствуют текущему селектору, вы можете выбрать щелчок, поскольку вы не хотите, чтобы это произошло - вы хотите обрабатывать только текущие выбранные элементы.

Кроме того, я подозреваю (хотя и не имею никаких доказательств), что есть небольшая эффективность с использованием 'click' над "живым".

Ли

Ответ 8

Насколько я понимаю, ключевое различие заключается в том, что live() держит глаза открытыми для новых элементов DOM, которые соответствуют селектору, над которым вы работаете, тогда как click() (или bind ('click')) присоединяют крючок события и завершены.

Учитывая, что alot вашего кода загружается асинхронно, использование live() сделает вашу жизнь намного проще. Если вы точно не знаете код, который вы загружаете, но знаете, какие элементы вы будете слушать, то использование этой функции имеет смысл.

В плане повышения производительности одной альтернативой использованию live() было бы реализовать функцию обратного вызова AJAX для повторной привязки перехватчиков событий.

var ajaxCallback = function(){
 $('*').unbind('click');
 $('.something').bind('click', someFunction);
 $('.somethingElse').bind('click', someOtherFunction);
}

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

p.s. Ajax методы .get(),.post(),.load() и .ajax() позволяют указать функцию обратного вызова.

Ответ 9

Если вам нужно упростить код, тогда лучше жить в большинстве случаев. Если вам нужно получить лучшую производительность, то делегат всегда будет лучше, чем жить. bind (click) vs delegate - не простой вопрос (если у вас много похожих элементов, то делегат будет лучше).

Ответ 10

помните, что использование "live" для "jQuery 1.3" или выше

в версии "jQuery 1.4.3" или выше используется "делегат"

и версия "jQuery 1.7 +" или выше используется "on"

$( selector ).live( events, data, handler ); // jQuery 1.3+
$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+
$( document ).on( events, selector, data, handler ); // jQuery 1.7+

Как и в jQuery 1.7, метод .live() устарел.

проверить http://api.jquery.com/live/

С уважением, Фернандо

Ответ 11

В дополнение к T.J. Crowders answer, я добавил еще несколько обработчиков - включая новый обработчик .on(...) к фрагменту, чтобы вы могли видеть, какие события скрыты, а какие нет.

Я также нашел, что .live() не только устарел, но и удален с jQuery 1.9.x. Но другие, т.е.
.click, .delegate/.undelegate и .on/.off
все еще существуют.

Также обратите внимание, что здесь обсуждается этот вопрос fooobar.com/info/98678/....

Если вам нужно исправить устаревший код, который опирается на .live, но вам нужно использовать новую версию jQuery ( > 1.8.3), вы можете исправить ее с помощью этого фрагмента:

// fix if legacy code uses .live, but you want to user newer jQuery library
if (!$.fn.live) {
    // in this case .live does not exist, emulate .live by calling .on
    $.fn.live = function(events, handler) {
      $(this).on(events, null, {}, handler);
    };
}

Цель фрагмента ниже, который является расширением T.J. script, заключается в том, что вы можете самостоятельно попробовать, что произойдет, если вы привяжете несколько обработчиков, - поэтому, пожалуйста, запустите фрагмент и нажмите на тексты ниже:

jQuery(function($) {

  // .live connects function with all spans
  $('span').live('click', function() {
    display("<tt>live</tt> caught a click!");
  });

  // --- catcher1 events ---

  // .click connects function with id='catcher1'
  $('#catcher1').click(function() {
    display("Click Catcher1 caught a click and prevented <tt>live</tt> from seeing it.");
    return false;
  });

  // --- catcher2 events ---

  // .click connects function with id='catcher2'
  $('#catcher2').click(function() {
    display("Click Catcher2 caught a click and prevented <tt>live</tt>, <tt>delegate</tt> and <tt>on</tt> from seeing it.");
    return false;
  });

  // .delegate connects function with id='catcher2'
  $(document).delegate('#catcher2', 'click', function() {
    display("Delegate Catcher2 caught a click and prevented <tt>live</tt> from seeing it.");
    return false;
  });

  // .on connects function with id='catcher2'
  $(document).on('click', '#catcher2', {}, function() {
    display("On Catcher2 caught a click and prevented <tt>live</tt> from seeing it.");
    return false;
  });

  // --- catcher3 events ---

  // .delegate connects function with id='catcher3'
  $(document).delegate('#catcher3', 'click', function() {
    display("Delegate Catcher3 caught a click and <tt>live</tt> and <tt>on</tt> can see it.");
    return false;
  });

  // .on connects function with id='catcher3'
  $(document).on('click', '#catcher3', {}, function() {
    display("On Catcher3 caught a click and and <tt>live</tt> and <tt>delegate</tt> can see it.");
    return false;
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});
<!-- with JQuery 1.8.3 it still works, but .live was removed since 1.9.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

<style>
span.frame {
    line-height: 170%; border-style: groove;
}
</style>

<div>
  <span class="frame">Click me</span>
  <span class="frame">or me</span>
  <span class="frame">or me</span>
  <div>
    <span class="frame">I'm two levels in</span>
    <span class="frame">so am I</span>
  </div>
  <div id='catcher1'>
    <span class="frame">#1 - I'm two levels in AND my parent interferes with <tt>live</tt></span>
    <span class="frame">me too</span>
  </div>
  <div id='catcher2'>
    <span class="frame">#2 - I'm two levels in AND my parent interferes with <tt>live</tt></span>
    <span class="frame">me too</span>
  </div>
  <div id='catcher3'>
    <span class="frame">#3 - I'm two levels in AND my parent interferes with <tt>live</tt></span>
    <span class="frame">me too</span>
  </div>
</div>