jquery $(document).on('click', selector, … ) vs $(selector).on('click',

Question

I have always used in the past:

$(selector).on(\'click\', function )

But today I was binding this on an object that came in after docready

Answer 1

The first example binds the event listener directly to the elements. It adds a separate listener for each element, and it will only respond to events on elements that were in the DOM at the time the listeners were added.

The second example binds the event listener to the document object. It will check any event that bubbles up to the document object and test to see if the element the event started on matches the selector before firing the function. It doesn't require the elements to exist in the document when the listener is bound. It is possible for the event to be captured (by another listener) and propagation stopped before it bubbles up to the document object.