Dynamic element event binding: How to bind events to dynamically created elements?

Question

I have some code where I loop through all the select boxes on the page and bind the .hover event to them to change their width on the mouse on/off Make some adjustments.

This happens when the page is ready and working properly.

The problem I'm having is that any select boxes added via Ajax or DOM after the initial loop won't have the event bound.

I've found this plugin (jQuery Live Query Plugin), but before I use the plugin to add another 5k to my page, I wanted to see if anyone knows how to do it, either directly using jQuery or through other options.

Answer 1

There's a good explanation in the documentation at

jQuery.fn.on.

in short:

So in the example below #dataTable tbody tr must 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 clicked tbody to tbody).

Note: Delegated events do not work with SVG.

Answer 2

Starting with jQuery 1.7, you should use jQuery.fn.on and 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 use live():

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

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

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

...can be replaced with the following on() signature:

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

---

For example, if your page dynamically creates an element with the class name dosomething, you can bind the event to an already 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) be document. But please keep in mind that document may 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