How do I attach events to dynamic HTML elements with jQuery?

Using .on() with dynamic elements

The .on() method in jQuery is key when we want our dynamically added DOM elements to respond to events. If you're using jQuery 1.7 or newer, .on() should be your numero uno for event handling.

Parent delegation

Assign event handlers to a parent element that already exists in the DOM. Use a selector parameter to specify the dynamic children that should trigger the event.

$('#parent-element').on('click', '.dynamic-child', function(e) {
  e.preventDefault();
  // Can't touch this!
});


One .on() to rule them all

Capable of handling multiple event bindings in a single function.

$('#parent-element').on({
  click: function() {
    // One does not simply click...
  },
  mouseenter: function() {
    // Hovercraft is full of eels
  }
}, '.dynamic-child');


Off, on again

Use .off() prior to .on() to prevent doppelgänger handlers upon refreshing event handlers.

$('#parent-element').off('click', '.dynamic-child').on('click', '.dynamic-child', function() {
  // The matrix has you...
});


Ebenezer Scrooge delegation

Be miserly-- only delegate events to the event's actual target by verifying e.target.

$(document).on('click', '.dynamic-child', function(e) {
  if ($(e.target).is(this)) {
    // This. Is. Selector!
  }
});


Into the jQuery Delegation matrix

Take a byte of dynamic content

Either AJAX or DHTML your dynamic addition to the DOM, but don't forget to .on() their events.

Picking delegates closest to home

Pick the nearest static ancestor to your dynamic elements. Reduce event propagation and improve performance.

Wrapping it up

Develop complicated applications with the support of encapsulated event handling logic for better management of dynamic elements' events.

Stay up to date

Technology is always evolving. Keep calm and check the jQuery documentation to stay current with event management techniques.