Using jQuery Event Delegation to Handle Dynamically Added Elements

The Problem: Lost Events on AJAX‑Loaded Buttons

When you attach a click handler to buttons that exist on page load, any buttons you add later with JavaScript or AJAX will not respond.

How jQuery Event Delegation Solves It

By attaching a single listener to a stable ancestor and filtering events with a selector, jQuery can catch bubbles from any matching descendant, present or future.

$('#container').on('click', '.btn', function (e) {
  console.log('Button clicked', e.target);
});

Worked Example: Adding Buttons After Page Load

1. HTML: a empty <div id="button-list"></div>
2. Initial script: delegate click to the div.
3. Function to append new button.
4. Show that newly added button triggers the same handler.

// HTML
// <div id="button-list"></div>

// JavaScript
$('#button-list').on('click', '.dynamic-btn', function () {
  $(this).after('<button class="dynamic-btn">Another</button>');
});

// Add the first button to start
$('#button-list').append('<button class="dynamic-btn">Click me</button>');

Trade‑offs and Limitations

• Delegating to document or body works but can degrade performance for high‑frequency events like mousemove.
• Events that do not bubble (focus, blur) need the useCapture flag or direct binding.
• An overly broad selector (e.g., '*') may fire on unintended elements; keep selectors as specific as needed.

When to Use This Pattern

Use delegation when you manage collections of similar elements that are added or removed dynamically—such as table rows, list items, or form fields generated by AJAX.

Actionable Takeaway

Replace repeated .click() bindings on individual elements with a single .on() call on a stable parent, specifying the child selector. Test by adding elements after the initial load and confirming the handler fires.