The other day, I wasn’t really too acquainted with the .live() jQuery function. I did some research and it finally clicked for me. I put together a quick example that can I uploaded. The basics of the function can be known as:

Binds a handler to an event (like click) for all current – and future – matched element. Can also bind custom events. – (source: jquery.com)

This function is extremely similar to the .click() but .click() will only match elements that are created via the XHTML with DOM is loaded. With that said, using .live() is extremely useful for dynamic websites, where you are creating/removing elements on you’re website.

Lets see the base example of using .live()

$('a.edit').live('click', function() {
     alert("The power of .live() - dynamically created objects will have bound events!")
     return false;
});

This code will work for all links that have the class edit, even when new a.link tags are created dynamically after DOM has been loaded. If your code looked like:

$('a.edit-nolive').click(function() {
     alert("Items created via AJAX will be called on using .live()")
     return false;
});

It would not work on dynamically created items. Lets take another look at the full demo. Hopefully this will clear up any problems with understanding how the jQuery .live() function works in comparison to the .click() event. Like to see something else like this? Drop me a line.