Click here to Skip to main content
13,860,571 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


8 bookmarked
Posted 24 Jan 2011
Licenced CPOL

The jQuery 'live(…)' Function

, 10 Jan 2014
Rate this:
Please Sign up or sign in to vote.
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 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 selectorincluding 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:

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


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:

I hope someone finds this useful.

Steve Wellens.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Steve Wellens
EndWell Software, Inc.
United States United States
I am an independent contractor/consultant working in the Twin Cities area in Minnesota. I work in .Net, Asp.Net, C#, C++, XML, SQL, Windows Forms, HTML, CSS, etc., etc., etc.

You may also be interested in...

Comments and Discussions

QuestionAmazing analogy Pin
CJV_Xtream13-Jan-14 8:25
memberCJV_Xtream13-Jan-14 8:25 
GeneralMy vote of 3 Pin
ryanconrad11-Jan-14 7:42
memberryanconrad11-Jan-14 7:42 
GeneralRe: My vote of 3 Pin
Steve Wellens11-Jan-14 12:13
memberSteve Wellens11-Jan-14 12:13 
GeneralMy vote of 5 Pin
jim lahey25-Jan-11 5:26
memberjim lahey25-Jan-11 5:26 
Generalnice Pin
Pranay Rana25-Jan-11 1:09
professionalPranay Rana25-Jan-11 1:09 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.190214.1 | Last Updated 10 Jan 2014
Article Copyright 2011 by Steve Wellens
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid