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

The first method you describe works because you are selecting a static parent and then a dynamic child, which follows the rules of binding events to dynamically created elements with the .on method.

Here is the syntax for the .on method, which it sounds like you have done a bit of studying on already.

$(selector).on(event,childSelector,data,function,map)

So if I want to bind to a dynamic element with .on, I have to dollar sign select a static parent element first then, inside the .on method, select the dynamic child element. In your case the correct use case would work like this:

$("body").on('dblclick', '#areaA tr:has(td)', function(e) {
    //Code here
});

Since you mentioned it wasn't working I'm assuming #areaA isn't a static element. You can replace body for a more relevant static element, or just leave it body, it doesn't really matter.