Difference $('div').on('click'... and $(document).on('click', 'div'

Question

What is the difference between

$('div').on('click', function() {
   alert(1);
});

and

$(document).on('click', 'div', function() {
   alert(1);
});

Answer 1

The first one will bind click event on existing elements in DOM and later will bind the event for elements which are present in DOM or added dynamically after the execution of event binding code. The second method is called event delegation

Direct and delegated events

The majority of browser events bubble, or propagate, from the deepest, innermost element (the event target) in the document where they occur all the way up to the body and the document element. In Internet Explorer 8 and lower, a few events such as change and submit do not natively bubble but jQuery patches these to bubble and create consistent cross-browser behavior.

If selector is omitted or is null, the event handler is referred to as direct or directly-bound. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element), reference

Answer 2

The first example ($('div').on('click', fn);) is attaching the click event handler directly to the div elements which currently exist in the DOM, matched by the selector.

The second example ($(document).on('click', 'div', fn)) is a 'delegate' event handler. The click event will be raised on the div elements found within document, but a single handler is attached to the document.

The delegate type of event handling is used in situations where elements will be appended dynamically to the DOM, as the first method will only attach event to elements present in the DOM on load of the page. It should be noted however, that delegated events should be put on the nearest static element to those added dynamically, which is present on document load. Almost never should document be used for this, as it is less performant.

Also, delegate events are useful in situations where you are attaching a lot of duplicate event handlers. For example, instead of attaching a click event to hundreds of tr elements of a table, attach a single delegated event to the table itself, filtered on the tr.

Answer 3

The documentation describes it pretty well: http://api.jquery.com/on/

Check the "Direct and delegated events" section;

Also, let me quote a part of it:

In addition to their ability to handle events on descendant elements not yet created, another advantage of delegated events is their potential for much lower overhead when many elements must be monitored. On a data table with 1,000 rows in its tbody, this example attaches a handler to 1,000 elements:

$( "#dataTable tbody tr" ).on( "click", function() {
  alert( $( this ).text() );
});

A delegated-events approach attaches an event handler to only one element, the tbody, and the event only needs to bubble up one level (from the clicked tr to tbody):

$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});

Note: Delegated events do not work for SVG.

Answer 4

The documentation is pretty concise about that.

Excerpt:

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.

http://api.jquery.com/on/#direct-and-delegated-events

Answer 5

The difference is that $('div').on('click', function () { ... } only binds elements that already exist.

$(document).on('click', 'div', function () { ... } has a delegate and also binds div elements that are created dynamically in the future.