Understanding jQuery on method regarding relative selector (event delegation)

Question

I need some advice of understanding jQuery's .on() method. One of the cases when I'm using .on() would be following:

I want to attach a clickhandler to an element which isn't already in the markup.

$('#somediv').on('click', '#trigger', function() {
    // an awesome click event
});

$('#somediv').append('<span id="trigger">Click</span>');

My question now is, what if #somediv wouldn't be in the markup as well. Which parent selector would I apply the .on() method to. Can I just use $('body').on() or is there a specific rule where to attach it.

Thanks

You got it right. Always find the closest parent that would exist in the markup when you are delegating the event. If none exist, use `$(document)`. — Selvakumar Arumugam, Oct 29 '14 at 14:40
@Vega but why would I use always the closest parent. In fact, what's the difference when I use `$('body')` even if `#somediv` is given! Performance, not semantic ..? — supersize, Oct 29 '14 at 14:54
Using closest parent is to avoid calling the handler every time when something happens. For ex: Lets say you delegate a click handler to body like `$('body').append('Click');`. jQuery binds a handler to body element and internally check if the clicked element is `#trigger` and executes the handler. Note: the check is going to happen every time anywhere you click in the body, which is why we find the closest parent to limit the click execution. I hope i explained it correctly. — Selvakumar Arumugam, Oct 29 '14 at 15:01
@Vega sounds comprehensible to me! Maybe you can do an answer? — supersize, Oct 29 '14 at 15:05
Thanks, I posted it as an answer and I see you accepted it already. :) — Selvakumar Arumugam, Oct 29 '14 at 15:24

score 1 · Accepted Answer · edited May 23 '17 at 10:33

You got it right, It is better to find the closest parent that exist in DOM at the time of event delegation. Using closest parent limits the range jQuery has to check before delegating.

For ex: Lets say we bind a click handler to body tag delegating for #trigger element that will be dynamically included later

$('body').on('click', '#trigger', function() {
   // an awesome click event
});

$('body').append('<span id="trigger">Click</span>');

In the above example, jQuery will bind the click handler to body tag and internally check if the clicked element matches the selector. Note that every time anywhere you click in the body, the jQuery .on is executed which validates if the click event is triggered from #trigger elemenet and calls the event handler.

This is why it is better to find and delegate the event to the closest parent that exist in DOM at the time of binding.

With that being said, an even better approach would be to directly bind the event after the element is injected to DOM. Read more on which method to choose here: event delegation vs direct binding when adding complex elements to a page

Understanding jQuery on method regarding relative selector (event delegation)

1 Answers1