Event binding on dynamically created elements?

Getting to the core of dynamic event binding

The why and what

Newly added content through JavaScript, AJAX, or user interaction doesn't come with prebound event listeners because these elements weren't there when the initial bindings took place. It's like arriving late to a party and not getting an introduction because you weren't there for the toasts.

Event delegation - our savior

To combat this, enter event delegation with a superhero cape. It lets us bind a single event listener to an ancestor that exists from the word go. This listener wakes up for events on child elements that match a selector, whether they just joined the party or were there all along.

Efficiency Matters - Choose the right parent.

Not everything should be bound to the document. The closer the event handler is to the target elements, the less bubbling, the better the performance. Always remember to select a static ancestor that's more local than document but doesn't dynamically change.

Delegating with .on()

From .live() to .on()

.live() was the past, showing "method not found" after jQuery 1.9. Transition to .on(), the one-stop solution for event handling on existing and future elements:

// jQuery 1.7 and before - .live()
$('.dynamic-element').live('click', handler);
// From jQuery 1.7 onwards, we use .on()
$(document).on('click', '.dynamic-element', handler);


Types of event binding

Direct event binding (Think: "You have a direct hotline to the president."):

$('.static-element').on('click', handler);


Delegated event binding, or "playing telephone" through a parent:

$('#parent-element').on('click', '.dynamic-element', handler);


Handling special cases

More than just clicks

Distinguish and handle hover events, or any sort of mouse-based events (mouseenter, mouseleave) with the power of .on(). This gets hovercrafts like dropdown menus and tooltips all juiced up!

Beware of SVGs and special elements

Some elements, like those weirdest cousins SVGs, don't play by jQuery rules. But don't worry, go addEventListener on them and you've got it covered!

Manage your event handlers

Clean up after the party. You wouldn't leave your trash around, would you? So, don't forget to use .off() when you don't need the listeners anymore:

$('#parent-element').off('event', '.dynamic-selector', handler);


Real-world scenarios and best practices

Fresh content from AJAX

When fresh morsels of elements are added via AJAX calls, remember to apply event bindings anew:

function bindDynamicEvents() {
  $('#parent-element').on('click', '.dynamic-element', handler);
}

$.ajax({
  // setup AJAX here
  success: function(data) {
    // insert new content
    bindDynamicEvents(); // Invite the new elements to the party
  }
});


Named functions for the win

Articulate your code by assigning complex bindings or repetitive logic to named functions:

function complexLogic() {
  // Heavy lifting here
}

$('#parent').on('click', '.dynamic-child', complexLogic);


The dynamic drop-down case

When the going gets tough with managing dynamic UI components like <select> dropdowns, buckle up and apply events just as the element is forged:

function createDynamicSelect(data) {
  var $select = $('<select>').appendTo('#someContainer');
  //Fill up the select options here
  $select.on('change', handleSelectChange); // Get the new select onboard
}


Uniqueness is important

Watch out for uniqueness when multiple instances of the same type of element are dynamically added. Don't bring two identical dishes to a potluck:

// Piggyback on some unique property to discern:
$(container).on('click', '.dynamic-child-unique', uniqueHandler);


References