Каково различие между связыванием и живыми методами в jQuery?
Я натолкнулся на эту тему с той же проблемой, но, наконец, ниже то, что работает для меня, что без sudo
$ brew update
$ brew uninstall node
$ brew install node
$ chown -R YourUserName /usr/local/lib/node_modules/
$ brew postinstall node #This what the important step
8 ответов
. bind () прикрепляет события к элементам, которые существуют или соответствуют селектору во время вызова. Любые элементы, созданные позже или совпадающие в будущем из-за изменения класса, не вызовут связанное событие.
.live () работает для существующих и будущих совпадающих элементов. До jQuery 1.4 это было ограничено следующими событиями: click, dblclick mousedown, mouseup, mousemove,
Вкратце: .bind () будет применяться только к элементам, которые вы сейчас используете выбрали в вашем объекте jQuery. .live () будет применяться ко всем текущим совпадающим элементам, а также ко всем, что вы можете добавить в будущем.
Основное различие между ними заключается в том, что Результат двоякий: во-первых, это означает, что вам не нужно повторно применять события к новые элементы, поскольку они будут добавлены неявно, когда произойдет событие. Однако, что более важно (в зависимости от вашей ситуации), это означает, что ваш код намного легче! Если у вас есть 50 тегов ... тогда эта функция копируется в каждый из этих элементов. Однако, если у вас был этот код: ... тогда эта функция хранится только в одном месте (в документе) и применяется ко всему, что соответствует вашему запросу во время события. Однако из-за такого поведения пузырьков , не все события можно обрабатывать таким образом. Как заметил Ичибан, этими поддерживаемыми событиями являются щелчок, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup. live () использует из всплывающих событий . То есть, когда вы нажимаете кнопку, эта кнопка может существовать в , в . ; Таким образом, вы фактически нажимаете на все эти элементы одновременно.
live () работает, прикрепляя обработчик событий к документу , а не к элемент . Когда вы нажимаете на эту кнопку, как показано ранее, документ получает то же событие щелчка. Затем он выполняет поиск по строке элементов, на которые нацелено событие, и проверяет, соответствует ли какой-либо из них вашему запросу. на странице и вы запускаете этот код:
$('img').click(function() { /* doSomething */ });
$('img').live('click', function() { /* doSomething */ });
В дополнение к тому, что они сказали, я думаю, что лучше всего попытаться придерживаться привязки когда / где вы можете и использовать live только тогда, когда вы должен.
Bind будет связывать события с указанным шаблоном для всех совпадений в текущей модели DOM в момент ее вызова. Live будет связывать события с указанным шаблоном для текущего DOM и с будущими совпадениями в DOM, даже если он изменится.
Например, если вы привяжете $ ("div"). Bind ("hover", ... ) он будет применяться ко всем "div" в DOM в то время. Если вы затем манипулируете DOM и добавляете дополнительный «div», он не будет привязан к событию зависания. Использование live вместо bind также отправит событие в новый div.
представьте себе такой сценарий:
- У меня есть несколько элементов
$ ('img'). Bind ('click', function () {...});- добавить несколько дополнительных изображений (используя
get ()илиhtml (), что угодно) - новые изображения не имеют привязки !!
конечно, поскольку новых изображений не существовало, когда вы выполняли $ ('img'). .. на шаге 2 он не привязал к ним обработчик событий.
теперь, если вы сделаете это:
- у меня есть несколько элементов
$ ('img'). Live ('click', function () {...});- добавить несколько дополнительных изображений (используя
get ()илиhtml (), что угодно) - новые изображения имеют ли привязку !!
магия? немножко. фактически jQuery связывает общий обработчик событий с другим элементом, расположенным выше в дереве DOM (тело? документ? без понятия), и позволяет событию всплывать. когда доходит до универсального обработчика, он проверяет, соответствует ли он вашим событиям live () , и если да, они запускаются, независимо от того, был ли элемент создан до или после live () звонок.
Я хотел добавить к этому после небольшой отладки из-за моей собственной глупости. Я применил .live () к классу кнопок на моей странице, предполагая, что он просто отобразит правильный идентификатор, который я пытался передать в строке запроса, и сделал то, что я хотел сделать с вызовом ajax. В моем приложении есть динамически добавляемые кнопки, связанные с элементом инвентаря. Например, разверните категории до кнопки «КОКС», чтобы добавить кокс в свой заказ. Снова развернитесь вниз и добавляйте «BUDLITE» - каждый раз, когда я хотел, чтобы эти элементы были введены в таблицу с помощью вызова AJAX.
Однако , поскольку я привязал .live () ко всему классу кнопок, он запоминает каждый сделанный мной вызов ajax и повторно запускает его для каждой последующей кнопки! Это было немного сложно, потому что я не
Есть способ получить живой эффект, но он довольно неприятный.
$ (this) .unbind ('mouseout'). Bind ('mouseout', function () { });
это очистит предыдущее и сбросит новое. Со временем мне показалось, что это нормально работает.