jQuery: what correct use of .on() in this situation?

Question

Consider the following markup:

 <div class="parent">
     <div class="child">
         button
    </div>
 </div>

I need to run a function on a click event on the child class and I've got the following two options:

 $(".parent").on("click", ".child", function(){....});

and

 $(document).on("click", ".child", function(){....});

Is there a dramatic difference on performance between using a direct parent as a target and the document itself? To me using document seems as a more robust option (if the parent class was changed for instance) - just need to make sure it won't cause problems if I start using this method everywhere.

PS The child is added dynamically inside the parent hence I'm using .on()

Answer 1

$(".parent").on("click", ".child", function(){....});

binds your click event to only those elements with class '.parent' that are present within the document and the event is bubbled from the target('.child') to the element where the handler is attached. This is much preferable than adding it to document as, adding it to document like

$(document).on("click", ".child", function(){....});

1. Bubbles the click event from the target in the document where they occur all the way up to the body and the document element.

2. As @Woff mentioned, bound handlers wont get removed on removal of .parent elements.

Answer 2

"Performance" should not be an issue in your case.

There is an obvious difference between your two choices :

 <div class="parent">
     <div class="child" id="A">
         button
     </div>
 </div>
 <div class="child" id="B">
     button
 </div>

If you bind your handler on document , clicking on #B will trigger the handler.
If you bind your handler on .parent , clicking on #B won't trigger the handler.

You have to decide if what you want is to listen to all nodes tagged with the .child class in the document, or only the ones which are nested under a .parent element.

---

Other points to take into account :

• IMHO it is best to narrow as much as possible the scope of your actions. From your question, $('.parent') seems to be the best target.

• However, if your .parent elements are also dynamically added / removed, do not use them as binding targets. Try to target some other node which you have created, but which will always remain in the DOM (for example : wrap your html in a #myModule div and bind your events to $('#myModule') ).

• .stopPropagation() : the main difference in delegation vs. direct binding is that the handler is executed when the event has bubbled up to the target node.
  If you rely on .stopPropagation() or return false to prevent the execution of other handlers, this has an impact on when the event is actually stopped.
  Here is a fiddle to illustrate this.