When working with content loaded asynchronously is there any difference from a performance point of view between:

// .live()
$('#mybutton').live('click', function(e){ doSomething(); });

and manually bind() the events we need every time after the content has been loaded:

// manual bind every time
$.ajax({
    url: url,
    success: function(data){
        mycontainer.html(data); // data contains #mybutton
        $('#mybutton').click(function(e){ doSomething(); });  
    }
});

?

When working with content loaded asynchronously is there any difference from a performance point of view between:

// .live()
$('#mybutton').live('click', function(e){ doSomething(); });

and manually bind() the events we need every time after the content has been loaded:

// manual bind every time
$.ajax({
    url: url,
    success: function(data){
        mycontainer.html(data); // data contains #mybutton
        $('#mybutton').click(function(e){ doSomething(); });  
    }
});

?

• javascript
• jquery
• performance

• 1 artzstudio./2009/04/jquery-performance-rules – Mike Grace Commented Dec 2, 2010 at 17:07

3 Answers 3

There are different costs, let's look at them:

$('#mybutton').live('click', function(e){ doSomething(); });

There are 2 main costs here:

• The #mybutton selector needs to run immediately for no reason (the result is thrown away, we just wanted the selector anyway...we're binding to document). In this case it's an #id selector so that's a very low cost...in other cases it's not cheap and very wasteful (for example [attr=something]).
• Every click that bubbles up to document now has to be checked against this selector, a per-click evaluation cost, this varies with the number of clicks you expect.

Now let's look at the other method:

$('#mybutton').click(function(e){ doSomething(); });  

There are 2 main costs here as well:

• The #mybutton selector runs, but only once per ajax request. However, we're not wasting it, we're using the results.
• The click handler is bound to an actual element, rather than document, so there's a binding cost each time it runs, rather than once

However, there's no per-click cost and the selector call itself isn't wasted...so it's better overall, since you're using an ID, this isn't true in other cases.

In your case, since you're dealing with an ID (and guaranteed a single element), this is much cheaper:

$('#mybutton').click(function(e){ doSomething(); }); 

In other cases, where you're binding hundreds of elements, .live() is the clear winner, though .delegate() would be even better.

Probably a little, but I wouldn't worry about it. To me the .live() method looks much easier to maintain, so I would use that. As long as nothing's going painfully slow there's no need to worry about performance in JavaScript.

From the looks of your success function, you're attaching an event because that element is now available in your html? Is that so?

If that is the case, then if the function called via the click is always the same then you can use 'live'. Live lets you bind to events that don't yet exist. So you can put this in even before your document.ready. Then as the ajax updates your main document, that event should always work. You won't need to assign it every time.

So you get the performance benefit of not having to do something every time you return from an ajax call, you do the setup without relying on document.ready and its guaranteed to work.

HTH.