jQuerys .live() and .delegate() work on the principle that events can “bubble” over the DOM tree. This is a short story, it sounds easy, well, it's really quite easy. The presence of a DOM structure, for example
<html> <body> <div> <span>Foobar</span> </div> </body> </html>
If a click on the span occurs, for example, the browser checks to see if there are event handlers attached to this range node. If so, they will be fired. If these event handlers do not stop at what is called event propagation , the event swells. This means that your browser checks to see if the div node parent has any event handlers for the click element attached to it, etc ...
Anytime a .stopPropagation() occurs, the event handler may call a method called .stopPropagation() , which will prevent this event from occurring further.
Now the jQuery .live() method .live() always bind an event handler (for example, 'click') to the <body> element. This means that any click event that occurs somewhere on your page (because all other nodes are children of document.body ) will bubble up to <body> , regardless of whether the nodes already exist when .live() called .live() or added later.
The .delegate() method goes one step further. If you are dealing with a very large and deep DOM structure, it seems expensive in terms of performance (and it really is!), So that every event fills a complete tree. You can specify .delegate() generic parent of the node for newly created nodes. If, for example, we go astray with an unordered list that adds new li nodes, just connect any event handler to this <ul> node. All li nodes are child, so their events are bubbling.