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

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

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

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

Спасибо!

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

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

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

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

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

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

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

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

Ответ 3

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

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

Ответ 5

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

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

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

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

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

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

Ответ 6

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

Ответ 7

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

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

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

Подробнее здесь

Ответ 8

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

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

Ответ 9

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

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

это очистит предыдущий и reset новый. Кажется, он со временем работал нормально.