В чем разница между методами bind и live в jQuery? - PullRequest
Новая
       38

В чем разница между методами bind и live в jQuery?

65 голосов
/ 02 июня 2009

Мне любопытно узнать разницу между функциями связывания и живыми функциями.

Мне они кажутся почти идентичными.

Я прочитал преимущества методов live / bind , но это не сказало мне о различиях ...

Спасибо!

Ответы [ 10 ]

90 голосов
/ 02 июня 2009

Вкратце: .bind() будет применяться только к элементам, которые вы в данный момент выбрали в своем объекте jQuery. .live() будет применяться ко всем текущим соответствующим элементам, а также ко всем, которые вы можете добавить в будущем.

Основное различие между ними заключается в том, что live() использует всплывающее сообщение . То есть, когда вы нажимаете кнопку, эта кнопка может существовать в <p>, в <div>, в <body> элементе; таким образом, вы фактически нажимаете на все эти элементы одновременно.

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

Результат этого двоякий: во-первых, это означает, что вам не нужно продолжать повторно применять события к новым элементам, так как они будут добавлены неявно, когда событие произойдет. Однако, что более важно (в зависимости от вашей ситуации), это означает, что ваш код намного легче! Если у вас есть 50 <img> тегов на странице, и вы запускаете этот код: 

$('img').click(function() { /* doSomething */ });

... тогда эта функция копируется в каждый из этих элементов. Однако, если у вас был этот код: 

$('img').live('click', function() { /* doSomething */ });

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

Однако из-за этого пузырящего поведения не все события могут быть обработаны таким образом. Как отметил Ичибан, этими поддерживаемыми событиями являются щелчок, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup.

77 голосов
/ 02 июня 2009

.bind () прикрепляет события к элементам, которые существуют или соответствуют селектору во время вызова. Любые элементы, созданные впоследствии или соответствующие в будущем, поскольку класс был изменен, не будут вызывать связанное событие.

.live () работает для существующих и будущих соответствующих элементов. До jQuery 1.4 это было ограничено следующими событиями: щелчок, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, keydown, нажатие клавиши, keyup

5 голосов
/ 13 января 2012

Приятно читать на этом: http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

В настоящее время (начиная с jQuery 1.7) не рекомендуется использовать функцию .on () - http://api.jquery.com/on/

5 голосов
/ 02 июня 2009

Bind будет связывать события с указанным шаблоном для всех совпадений в текущем DOM во время его вызова. Live будет связывать события с указанным шаблоном для текущего DOM и будущих совпадений в DOM, даже если он изменится.

Например, если вы связываете $ ("div"). Bind ("hover", ...), это будет применяться ко всем "div" в DOM в то время. Если вы затем манипулируете DOM и добавите дополнительный «div», у этого события hover не будет привязано. Использование live вместо bind также отправит событие в новый div.

4 голосов
/ 02 июня 2009

представьте себе такой сценарий:

  1. У меня есть несколько <img> элементов.
    • $('img').bind('click', function(){...});
    • добавить несколько дополнительных изображений (используя get() или html(), что угодно)
    • новые изображения не имеют привязки !!

конечно, поскольку новые изображения не существовали, когда вы выполняли $('img')... на шаге 2, он не связывал с ними обработчик событий.

сейчас, если вы сделаете это:

  1. У меня есть несколько <img> элементов.
    • $('img').live('click', function(){...});
    • добавить несколько дополнительных изображений (используя get() или html(), что угодно)
    • новые изображения do имеют привязку !!

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

3 голосов
/ 02 июня 2009

В дополнение к тому, что они сказали, я думаю, что лучше попытаться придерживаться bind, когда / где вы можете, и использовать live только тогда, когда вы должны.

1 голос
/ 12 февраля 2014

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

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

.live (): Этот метод преодолевает недостаток bind (). Это работает для динамически добавленных элементов или будущих элементов. Из-за его низкой производительности на больших страницах этот метод устарел с jQuery 1.7, и вы должны прекратить его использование. При использовании этого метода цепочка не поддерживается должным образом.

Узнайте больше здесь

0 голосов
/ 14 октября 2009

Разница между live и livequery обсуждается здесь .

0 голосов
/ 09 октября 2009

Есть способ получить живой эффект, но он неприятный.

$ (это) .unbind ( 'MouseOut'). Bind ( 'MouseOut', функция () { });

это очистит предыдущее и сбросит новое. С течением времени мне показалось, что он работает нормально.

0 голосов
/ 10 июля 2009

Я хотел бы добавить к этому после небольшой отладки из-за моей собственной глупости. Я применил .live () к классу кнопки на моей странице, предполагая, что он просто отобразит правильный идентификатор, который я пытался передать в строке запроса, и сделает то, что я хотел сделать с вызовом ajax. Мое приложение имеет динамически добавленные кнопки, связанные с элементом инвентаря. Например, разверните категории до кнопки «COKE», чтобы добавить кокс в ваш заказ. Снова разверните сверху вниз и добавьте «BUDLITE» - каждый раз, когда я хотел, чтобы эти элементы были введены в таблицу с помощью вызова AJAX.

Однако , поскольку я привязал .live () ко всему классу кнопок, он запомнил бы каждый сделанный мной вызов ajax и перезапустил его для каждой последующей кнопки! Это было немного сложно, потому что я не совсем понимал разницу между bind и live (и ответ выше - кристально об этом), поэтому я решил поставить это здесь на тот случай, если кто-то будет искать этот материал .

...