I'm curious to know the differences between the bind and live functions.
To me they seem to be almost identical.
I read this, but it didn't tell me about the differences...
Thanks!
+12
A:
.bind() attacheds events to elements that exist or match the selector at the time the call is made. Any elements created afterwards or that match going forward because the class was changed, will not fire the bound event.
.live() works for existing and future matching elements. However, it is only limited to the following events: click, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
ichiban
2009-06-01 22:09:30
Ichiban is my favorite restaurant btw! No offense! Thanks for the help!
Kevin Brown
2009-06-01 22:24:57
For anyone reading this now, `.live()` is no longer limited to the events listed above. The `.live()` event now has support in jQuery 1.4 for all events, including custom events.
Josh Smith
2010-08-28 17:25:46
+3
A:
Bind will bind events to the specified pattern, for all matches in the current DOM at the time you call it. Live will bind events to the specified pattern for the current DOM and to future matches in the DOM, even if it changes.
For example, if you bind $("div").bind("hover", ...) it will apply to all "div"s in the DOM at the time. If you then manipulate the DOM and add an extra "div", it won't have that hover event bound. Using live instead of bind would dispatch the event to the new div as well.
Rob Beardow
2009-06-01 22:12:44
+1
A:
imagine this scenario:
- i have several
<img>elements. $('img').bind('click', function(){...});- add some extra images (using
get(), orhtml(), anything) - the new images don't have any binding!!
of course, since the new images didn't exist when you did the $('img')... at step 2, it didn't bind the event handler to them.
now, if you do this:
- i have several
<img>elements. $('img').live('click', function(){...});- add some extra images (using
get(), orhtml(), anything) - the new images do have the binding!!
magic? just a little. in fact jQuery binds a generic event handler to another element higher in the DOM tree (body? document? no idea) and lets the event bubble up. when it gets to the generic handler, it checks if it matches your live() events and if so, they're fired, no matter if the element was created before or after the live() call.
Javier
2009-06-01 22:13:05
+2
A:
In adition to what they said, I think it's best to try to stick to bind when/where you can and use live only when you must.
andi
2009-06-01 22:17:47
Why do you say that? I've found that live simplifies the code. I'm pretty picky about performance, and it seems fine to me. What's the downside?
Nosredna
2009-06-02 00:29:07
Well, first of all because not all events are available with live(). Secondly, because I think they are harder to manage (no stopPropagation and stopImmediatePropagation), and third because live() surely generates more overhead than bind() (as it looks for changes in the DOM). Maybe not a killer difference, but still. That's why I tend to stick to bind() where possible.
andi
2009-06-02 08:44:31
live() doesn't look for DOM changes, it maintains a list of target selectors and checks them at event time (the events fire on `document`). There is some overhead, but it's very minimal. The real danger is that some uses of `live` can cause garbage collection to fail.
eyelidlessness
2009-10-09 15:40:05
+8
A:
In short: .bind() will only apply to the items you currently have selected in your jQuery object. .live() will apply to all current matching elements, as well as any you might add in the future.
The underlying difference between them is that live() makes use of event bubbling. That is, when you click on a button, that button might exist in a <p>, in a <div>, in a <body> element; so in effect, you're actually clicking on all of those elements at the same time.
live() works by attaching your event handler to the document, not to the element. When you click on that button, as illustrated before, the document receives the same click event. It then looks back up the line of elements targeted by the event and checks to see if any of them match your query.
The outcome of this is twofold: firstly, it means that you don't have to continue reapplying events to new elements, since they'll be implicitly added when the event happens. However, more importantly (depending on your situation), it means that your code is much much lighter! If you have 50 <img> tags on the page and you run this code:
$('img').click(function() { /* doSomething */ });
...then that function is copied into each of those elements. However, if you had this code:
$('img').live('click', function() { /* doSomething */ });
...then that function is stored only in one place (on the document), and is applied to whatever matches your query at event time.
Because of this bubbling behaviour though, not all events can be handled this way. As Ichiban noted, these supported events are click, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup.
nickf
2009-06-02 00:25:22
Thanks for the explanation of *how* this works. The jQuery documentation doesn't explain any of this, which seems important for using it.
harpo
2010-03-23 18:46:27
A:
I wanted to add to this after having to debug a bit due to my own silliness. I applied .live() to a class of button on my page, assuming that it would just render out the correct ID I was trying to pass on the query string and do what I wanted to do with the ajax call. My app has dynamically added buttons associated with an inventory item. For instance, drill down categories to the 'COKE' button to add a coke to your order. Drill down from the top again, and add 'BUDLITE' - each time I wanted those items to be entered into a table via an AJAX call.
However, since I bound .live() to the entire class of buttons, it would remember each ajax call I had made and re-fire it for each subsequent button! It was a little tricky because I wasn't exactly clear on the difference between bind and live (and the answer above is crystal about it), so I figured I'd put this here just in case somebody was doing a search on this stuff.
A:
There is a way to get the live effect but its kind of nasty.
$(this).unbind('mouseout').bind('mouseout',function(){ });
this will clear the previous and reset the new. It has seemed to work fine for me over time.
David
2009-10-09 15:34:36
Or you can use proper event delegation, bind the events to `document`, and check the event's target.
eyelidlessness
2009-10-09 15:40:59