jQuery .delegate() Method

What Is .delegate()?

.delegate(selector, eventType, handler) attaches a handler on a root element for events from matching descendants — including elements added later (since 1.4.2). Argument order differs from .on().

// Deprecated (3.0+) — selector first
$("table").delegate("td", "click", function () {
  $(this).toggleClass("chosen");
});

// Modern equivalent — events first (1.7+)
$("table").on("click", "td", function () {
  $(this).toggleClass("chosen");
});

How to Use .delegate()

Bind once on a stable parent; filter by child selector when the event bubbles up.

1. Pick a root that will stay in the DOM (list, table, form, or body).
2. Call .delegate(selector, eventType, handler) on that root.
3. Inside the handler, this is the matched descendant that triggered the event.
4. Add or remove matching children later — no rebind needed.
5. In new code, write the same idea with .on(eventType, selector, handler).

Pseudocode

attach listener on ROOT for EVENT

when EVENT bubbles to ROOT:
    find original target
    if target matches SELECTOR (or is inside a match):
        run HANDLER with this = matched element
    else:
        ignore

new children that match SELECTOR:
    work automatically — no extra bind

Cheat Sheet

Keep these mappings handy while reading legacy code.

Live Preview

One .delegate() on the list — new items stay clickable.

Ready — click an item or run an action.

jQuery Examples

Short, copy-ready snippets. Prefer rewriting these with .on() in new projects.

$("body").delegate("p", "click", function () {
  $(this).after("
Another paragraph!
");
});

Click any <p> → a new <p> appears after it
New paragraphs also respond to clicks

// Legacy
$("table").delegate("td", "click", function () {
  $(this).text("clicked");
});

// Preferred (1.7+)
$("table").on("click", "td", function () {
  $(this).text("clicked");
});

Both forms log the same click on a <td>
Only argument order changes

$("#list").delegate("button", "click", { source: "toolbar" }, function (event) {
  $("#out").text(
    $(this).text() + " · " + event.data.source
  );
});

Save · toolbar

$("#nav").delegate("a", "click", function (event) {
  event.preventDefault();
  $("#out").text("Opened: " + $(this).text());
});

// Or cancel default + bubbling:
// return false;

Opened: Home
(page does not navigate)

$("body").delegate("p", "myCustomEvent", function (e, myName) {
  $(this).text("Hi there! " + myName);
});

$("#fire").on("click", function () {
  $("p").trigger("myCustomEvent", ["Sam"]);
});

Hi there! Sam

Performance Notes

Delegation is usually cheaper than rebinding every new child. Keep the root as close as practical so fewer unrelated bubbles are filtered.

Key Takeaways