1. bind()
$('a').bind('click', function() {
alert("That tickles!")
});
This is the most straight forward binding method. jQuery scans the document for all $('a')
elements and binds the alert function to each of their click
events.
2. live()
$('a').live('click', function() {
alert("That tickles!")
});
jQuery binds the alert function to the $(document)
element, along with'click'
and 'a'
as parameters. Any time an event bubbles up to the document node, it checks to see if the event was a click and if the target element of that event matches the 'a'
CSS selector. If both are true, the function executes. The live method can also be bound to a specific element (or “context”) other than document
, like this:
$('a', $('#container')[0]).live(...);
3. delegate()
$('#container').delegate('a', 'click', function() {
alert("That tickles!")
});
jQuery scans the document for $('#container')
, and binds the alert function along with the click
event and 'a'
CSS selector as parameters. Any time an event bubbles up to $('#container')
, it checks to see if the event was a click and if the target element of that event matches the CSS selector. If both checks are true, it executes the function.
Notice this is similar to .live()
, except that it binds the handler to the specified element instead of the document root. The astute JS’er might conclude that $('a').live() == $(document).delegate('a')
, right? Well, no, not exactly.
The jQuery team have announced in v1.7 a new method for binding events called on
. This method combines the functionality of live
, bind
, and delegate.