The jQuery ‘live(…)’ Function
[UPDATE]
The live function has been deprecated: "As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers."
On the Asp.Net forums where I am a moderator, a developer was having a problem hooking up click events to the rows of a dynamically created html table. He didn't want to embed the onclick handler in the table rows as each row was created so he tried using jQuery. The problem was he was trying to hook up the click event before the table was created. How to help him?
The jQuery live(…) function comes to the rescue!
What can I say about jQuery and the live(…) function? It's like falling in love with a beautiful woman, who is kind, can cook and keeps a tidy house. So you marry her and then you find out that she's heiress to a trust fund worth millions!
The jQuery live(…) function is an esoteric function; in fact, you may never find cause to use it in your entire career. But if you do use it, it can solve some problems very elegantly.
To put it succinctly, instead of this:
$('#MyTable tr').click(function()
{ alert("Table row clicked");})
Use this:
$('#MyTable tr').live('click', function()
{ alert("Table row clicked");})
The live(…) function causes the event handler to be automatically assigned to elements matching the selector…including elements that haven't been created yet. You heard that correctly. It assigns events to elements that don't exist.
As rows are created and added to the table element in question, they automatically get the event handler assigned.
While working on this I became curious and looked at the source code for the jQuery live(…) function. That was a mistake. A big mistake. There is a quote from Otto von Bismark that goes something like, "…two things you don't want to see made are sausage and legislation." I think we can add the jQuery source code to that list. To be fair, I understand that jquery code runs on millions of browsers daily. Sacrificing some readability and maintainability for performance is perfectly reasonable under these circumstances.
Fortunately, the online documentation provides a good description of how the function works: http://api.jquery.com/live/
Bonus Information: While I was poking around in the jQuery source code (with a safety rope, hard hat and air-sickness bag) I happened across some lines like these:
if ( name === "find" )
if ( arguments.length === 2 )
I'd never seen this before and it's not even mentioned in a book called The JavaScript Bible. It's called the Identity Equal Operator (there is also an Identity Not Equal operator !==). It checks both type and value. In other words, it does not do a type conversion before checking for equality. Here's an illustration of how it works compared to the equality operator:
var x = 3;
// equality
x == 3 is true
x == '3' is true
x == "3" is true
// identity equality
x === 3 is true
x === '3' is false
x === "3" is false
[Edit/Update]
It has been pointed out to me that jQuery 1.4 introduced the delegate(...) function which does the same thing as the live(...) function but inserts the event handler closer to the selected elements rather than at the root of the DOM so it's performance is better. However, another person pointed out if you are attaching events to dozens of elements (say anchors) it's better to have a single handler at the top of the DOM. Here is the best article I found discussing the differences: http://test.kingdesk.com/jquery/bind_live_delegate.php
I hope someone finds this useful.
Steve Wellens.