Question

Here said

$("table").delegate("td", "hover", function(){
    $(this).toggleClass("hover");
});

is same to

$("table").each(function(){
    $("td", this).live("hover", function(){
        $(this).toggleClass("hover");
    });
});

But I think it is also same to

$("table td").live("hover", function(){
    $(this).toggleClass("hover");
});

Thus the method delegate is waste, right?

Answer 1

The biggest difference (I think) is that live() attaches the event handler to the window element. Whereas delegate() binds the handler to the element you apply the method on.

So in theory, delegate() should be faster, especially for deeper nested structures, as the event does not have to bubble up the whole DOM tree.

Now since jQuery 1.4, if you use live(), the handler is bound to the context node, which is window by default. Thus

$("table").each(function(){
    $("td", this).live("hover", function(){
        $(this).toggleClass("hover");
    });
});

(context node explicitly set to this which refers to table) is not equal to

$("table td").live("hover", function(){
    $(this).toggleClass("hover");
});

In the latter example, the handler will be bound to window.

So delegate() achieves the same effect as the first example with much simpler code and is therefore easier to understand imo.