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

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

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

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

спасибо!

10 65
jquery data-binding http-live-streaming

10 ответов:

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

.live () работает для существующих и будущих совпадающих элементов. Перед jQuery 1.4 это сводилось к следующим событиям: нажмите, двойное нажатие события mousedown, mouseup с mousemove и события mouseover, mouseout, клавиша вниз, нажатие, клавиша вверх

77

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

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

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

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

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

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

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

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

из-за этого пузырящегося поведения, правда, не все события могут быть обработаны таким образом. Как Ичибан отметил, поддерживаемых событий нажмите, двойное нажатие события mousedown, mouseup с mousemove и события mouseover, mouseout, клавиша вниз, нажатие, клавиша вверх.

89

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

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

5

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

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

5

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

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

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

теперь, если вы делаете это:

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

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

4

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

3

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

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

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

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

1

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

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

0

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

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

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

0

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

0