Jquery .on with doubleclick event

Question

Why would this work :

$(document).on(\"dblclick\", \"#areaA tr:has(td)\", function(e) {
     //code here
 });

and this does not

Answer 1

Is there really a difference between these two pieces of code?

Yes. The first piece of code is a form of delegated event handling where the handler is fired by events bubbling up the document that were triggered by descendant elements. The second is binding an event handler to the actual element returned by jQuery for the designated selector (in this case #areaA tr:has(td)).

Here's the relevant information from the jQuery documentation:

First piece of code:

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

Second piece of code:

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on()