Question

Looking for a best practice here. But I just recently upgraded an app from jQuery 1.4 to 1.8 and I’m slowly switching out all the live calls to on calls.

$(document).on('click', 'a.edit', function(){

from :

$("a.edit").live(function() { 

1. Would it be faster to bind it to something more specific other than document?

2. Is there a speed difference between these two calls as is?

Answer 1

Delegating events to the document now means that all elements inside the document when clicked will fire the event handler, and then it checks to see if the target matches a.edit, and that’s a lot of checking. Narrowing it down to an element closer to a.edit will mean less elements fire the event handler, and fewer elements to check for a match with the specified target.

From the jQuery docs :

Use of the .live() method is no longer recommended since later
versions of jQuery offer better methods that do not have its
drawbacks. In particular, the following issues arise with the use of
.live():

jQuery attempts to retrieve the elements specified by the selector
before calling the .live() method, which may be time-consuming on
large documents. Chaining methods is not supported. For example,
$(“a”).find(“.offsite, .external”).live( … ); is not valid and does
not work as expected. Since all .live() events are attached at the
document element, events take the longest and slowest possible path
before they are handled. Calling event.stopPropagation() in the event
handler is ineffective in stopping event handlers attached lower in
the document; the event has already propagated to document. The
.live() method interacts with other event methods in ways that can be
surprising, e.g., $(document).unbind(“click”) removes all click
handlers attached by any call to .live()!

What it basically does is something like:

$(document).click(function(e) {
    if (e.target == ourElement) {
        //hey, our element was clicked and bubbled all the way to the root, 
        //so let's do something
    }else{
        //we just jumped through some hoops, but this is not the element we 
        //are looking for, so do nothing...and we do this on every click !
    }
});