There's a good explanation in the documentation at

jQuery.fn.on.

in short:

So in the example below#dataTable tbody trmust exist before generating code.

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

If new HTML is injected into the page, it is best to attach event handlers using delegated events, as described below.

The advantage of delegated events is that they can handle events from descendant elements that are later added to the document. For example, if the table exists but rows are added dynamically using code, the following will handle it:

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

In addition to being able to handle events on descendant elements that have not yet been created, another advantage of delegated events is that they may reduce overhead when many elements must be monitored. On a data table with 1,000 rows in

tbody, the first code example attaches handlers to 1,000 elements.

The delegate event method (second code example) only attaches the event handler to one element

tbody, and the event only needs to bubble up one level (from the clickedtbodytotbody).

Note:Delegated events do not work withSVG.

Starting with jQuery 1.7, you should usejQuery.fn.onand populate the selector parameters:

$(staticAncestors).on(eventName, dynamicChild, function() {});

illustrate:

This is called event delegation and it works as follows. This event is attached to the static parent (staticAncestors) of the element that should be handled. This jQuery handler is fired every time an event is fired on this element or one of its descendant elements. The handler then checks if the element that triggered the event matches your selector (dynamicChild). When there is a match, your custom handler function is executed.

---

Until then, the recommended method is to uselive():

$(selector).live( eventName, function(){} );

However,live()was deprecated in 1.7, replaced byon(), and removed entirely in 1.9.live()Signature:

$(selector).live( eventName, function(){} );

...can be replaced with the followingon()signature:

$(document).on( eventName, selector, function(){} );

---

For example, if your page dynamically creates an element with the class namedosomething, you can bind the event to analready existing parent(this is the core of the problem, you Need something present that is bound to, not bound to dynamic content), this can (and is the easiest option) bedocument. But please keep in mind thatdocumentmay not be the most efficient option.

$(document).on('mouseover mouseout', '.dosomething', function(){ // what you want to happen when mouseover and mouseout // occurs on elements that match '.dosomething' });

Any parent that exists when the event is bound will do. For example

$('.buttons').on('click', 'button', function(){ // do something here });

Applies to