Are delegate methods wasteful?

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

That depends. If that delegate is used by others then it makes sense to encapsulate and reuse.Also if the code can use another delegate at another time then you should keep it. However if not then the KISS principle is useful.

Answer 2

It does not say same.

It says equivalent, which means that the resulting functionality will be the same, but not the way it works under the hood.

Note this part

Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

Answer 3

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.

Answer 4

Your example is actually PERFECT for explaining why delegate is in fact not wasteful and why you should use delegate.

Let's say you have a 10x10 table. If you use bind on each td, you are attaching 100 event handlers to the document. Delegate is a much more efficient way to do this, because you're only attaching a single event handler to the document.

.bind(), .live() and .delegate() are not mere synonyms of one another. Although they seem to achieve similar things, each has its place. The right tool for the example you provide is .delegate().

.delegate() can sometimes feel like .live() because it may also work on elements created in the future, but it doesn't work the same way. In your example, the event handler is attached to the <table> itself. If the <td>s change, the event handler will still trigger on the table, and then look to see which <td> to 'hover', even if it didn't exist when the handler was created. .delegate() will therefore affect new <td>s that are created since the handler was set, but would not affect new tables that were created since the handler was set.

I hope this is helpful.