jQuery .delegate() Method

What You’ll Learn

The .delegate() method attaches event handlers to descendants that match a selector — including elements added after the page loads. This tutorial covers syntax, five official jQuery API examples, how delegation differs from direct binding, migration to .on(), and pitfalls every beginner maintaining legacy code should know.

Introduction

Event delegation solves a common problem: you want click (or other) handlers on list items, table cells, or buttons that may not exist when your script first runs. Instead of binding to each child individually, you attach one handler on a parent and filter by a CSS selector.

jQuery introduced .delegate() in version 1.4.2 as the successor to .live(), giving you explicit control over which element acts as the delegation root. In jQuery 1.7, .on() unified direct and delegated binding; .delegate() was deprecated in 3.0 but remains available for reading and maintaining older codebases.

Understanding .delegate()

.delegate() does not attach a handler directly to every matching descendant. It listens on the jQuery collection you call it on (the root or delegation context). When an event bubbles up from a descendant that matches your selector, jQuery runs your handler with this set to that matched element.

Choose .delegate() when maintaining legacy jQuery projects. For new code, use the equivalent .on() call — same behavior, modern API, and no deprecation warnings.

📝 Syntax

Three overloads from the official jQuery API:

1. Basic form — .delegate( selector, eventType, handler ) (since 1.4.2)

.delegate( selector, eventType, handler )

• selector — filters descendants that may trigger the handler.
• eventType — one or more space-separated events (e.g. "click", "keydown").
• handler — function( event ) { ... } executed when a match occurs.

2. With eventData — .delegate( selector, eventType, eventData, handler )

$( "#panel" ).delegate( "button", "click", { id: "save" }, function( event ) {
  console.log( event.data.id );  // "save"
} );

3. Events map — .delegate( selector, events ) (since 1.4.3)

$( "table" ).delegate( "td", {
  click: function() { $( this ).toggleClass( "chosen" ); },
  mouseenter: function() { $( this ).addClass( "hover" ); },
  mouseleave: function() { $( this ).removeClass( "hover" ); }
} );

Official migration template

// jQuery 1.4.3+ — deprecated since 3.0
$( elements ).delegate( selector, events, data, handler );

// jQuery 1.7+ — use this in new code
$( elements ).on( events, selector, data, handler );

Concrete example

$( "table" ).delegate( "td", "click", function() {
  $( this ).toggleClass( "chosen" );
} );

// Modern equivalent:
$( "table" ).on( "click", "td", function() {
  $( this ).toggleClass( "chosen" );
} );

Return value

• Returns the original jQuery object for chaining.
• Remove delegated handlers with .undelegate() or, preferably, .off().

Examples Gallery

Examples 1–5 follow the official jQuery API documentation for .delegate(). Use the Try-it links to run each snippet in the browser. Snippets use .delegate() to match the legacy API; migrate to .on() when writing new code.

$( "body" ).delegate( "p", "click", function() {
  $( this ).after( "<p>Another paragraph! <span>with extra text</span></p>" );
} );

Click "Click me!" → new paragraph appended

Click the new paragraph → another is appended

Handler covers all current and future p elements

$( "body" ).delegate( "p", "click", function() {
  alert( $( this ).text() );
} );

Click any paragraph → alert shows its text content

$(this) is the clicked p element

$( "body" ).delegate( "a", "click", function() {
  return false;
} );

Click any link → navigation blocked

return false = preventDefault() + stopPropagation()

$( "body" ).delegate( "a", "click", function( event ) {
  event.preventDefault();
} );

Click link → URL does not change

Other handlers on ancestors may still run

$( "body" ).delegate( "p", "myCustomEvent", function( e, myName, myValue ) {
  $( this ).text( "Hi there!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
} );

$( "button" ).on( "click", function() {
  $( "p" ).trigger( "myCustomEvent", [ "John", "Doe" ] );
} );

Click button → $("p").trigger("myCustomEvent")

Paragraph text becomes "Hi there!"

Span shows "myName = John" then fades out

🚀 Common Use Cases

• Dynamic todo lists — $("#tasks").delegate("li", "click", fn) covers items added via AJAX.
• Data tables — $("table").delegate("td", "click", fn) highlights cells without per-row binding.
• Action menus — delegate on a toolbar container for buttons injected at runtime.
• Legacy maintenance — read and refactor old plugins that still call .delegate().
• Scoped delegation — limit handlers to a widget root instead of the entire document (unlike old .live()).
• Migration audits — grep for .delegate( when upgrading to jQuery 3 with Migrate warnings enabled.

📝 Notes

• .delegate() was added in jQuery 1.4.2 and deprecated in 3.0. Prefer .on() for new code.
• Parameter order differs from .on(): delegate puts selector first, then event type.
• Unlike .live(), you choose the delegation root — handlers do not always attach at document.
• Events handled by .delegate() propagate to the root; handlers below the root may run first and call stopPropagation().
• Remove handlers with .undelegate() or the modern .off(eventType, selector).
• Passing and handling eventData works the same way as with .on().
• jQuery Migrate logs JQMIGRATE: jQuery.fn.delegate() is deprecated when this method is used on jQuery 3+.

💡 Best Practices