Search code examples
jqueryperformancehoverevent-delegation

Event Delegation in jQuery 1.4

I've got the following code:

$("ul.relatedAlbums li").hover(function(){
    $(this).css({fontWeight:"bold"});
},
function(){
    $(this).css({fontWeight:"normal"});
});

I've heard good things about event delegation and speed performance. Using jQuery's delegate method, I imagine it would go something like:

$("ul.relatedAlbums").delegate("li", "hover", function(){
    $(this).css({fontWeight:"bold"});
},
function(){
    $(this).css({fontWeight:"normal"});
});

But reading the documentation, it says that this method is like using the live event. And I had always understood using the live event to be inefficient. So, could someone out there enlighten me on the best practices for this?

Solution

  • Just to point out, .delegate() actually uses .live() internally at present and to depricate .live() would mean some framework effort.

    Unless you are adding elements to your page dynamically, you can use it as your first example. .live() and .delegate come into play when you have an interactive page where you are making changes to the elements contained therein.

    EDIT: to the downvoters: From the jQuery forum: http://forum.jquery.com/topic/depreciating-live citing THIS code:

    delegate: function( selector, types, data, fn ) { return this.live( types, data, fn, selector ); },

    My point being that a specific selector will limit the events if it is appropriate and just selecting .delegate() is not always best and there is no global "always do this". Otherwise, why not just use .delegate() for everything which would not be best.

    When WOULD delegate be appropriate? When your selector DOES have a common parent such as the often used li as the OP describes or where binding to a common parent through the .delegate() is desireable. Not for #selector in the singular, but worth examination for class or element selectors where multiples exist or dynamic placement of elements occurs.