jQuery .on() Method

What You’ll Learn

The .on() method attaches event handlers to elements. Since jQuery 1.7 it is the single recommended way to bind events — direct handlers, delegated handlers for dynamic DOM, eventData, namespaces, and custom events. This tutorial covers all official signatures, five worked examples from the jQuery API, and migration from legacy methods.

Introduction

Every interactive web page reacts to user input — clicks, keystrokes, form submissions. jQuery’s .on() method is how you connect those browser events to your JavaScript functions. Introduced in version 1.7, it replaced a patchwork of older methods (.bind(), .delegate(), .live()) with one flexible API.

Whether you need a simple click handler on a button, delegation on a list that grows dynamically, or a custom event your components trigger among themselves, .on() handles it. Pair it with .off() to remove handlers when widgets are destroyed or routes change.

Understanding .on()

When you call $("#btn").on("click", handler), jQuery stores your function in an internal event registry on that element. The next time a click bubbles through the element, jQuery calls your handler with a normalized event object and sets this to the element where the handler is being delivered.

Add a selector argument and the handler becomes delegated: jQuery listens on the parent but only runs the handler when the event originated from a descendant matching the selector. That is how one handler on tbody can serve 1,000 table rows — and rows added later.

📝 Syntax

Two main signatures from the official jQuery API (both since 1.7):

1. Handler function — .on( events [, selector ] [, data ], handler )

.on( events [, selector ] [, data ], handler )

• events — one or more space-separated types with optional namespaces (e.g. "click", "keydown.myPlugin").
• selector — descendant filter for delegation; omit for direct binding.
• data — plain object copied to event.data when the handler runs.
• handler — function to run, or false as shorthand for return false (preventDefault + stopPropagation).

2. Events map — .on( events [, selector ] [, data ] )

$( "div.test" ).on({
  click: function() { $( this ).toggleClass( "active" ); },
  mouseenter: function() { $( this ).addClass( "inside" ); },
  mouseleave: function() { $( this ).removeClass( "inside" ); }
});

Direct vs delegated binding

// Direct — handler on the button itself
$( "#save" ).on( "click", saveHandler );

// Delegated — handler on #list, filter "li"
$( "#list" ).on( "click", "li", selectItem );

// Document-level delegation (replaces .live())
$( document ).on( "click", "p", paragraphHandler );

Legacy migration template

// .bind()  →  .on()
$( "#btn" ).bind( "click", fn );
$( "#btn" ).on( "click", fn );

// .delegate()  →  .on()  (note argument order change!)
$( "#list" ).delegate( "li", "click", fn );
$( "#list" ).on( "click", "li", fn );

// .live()  →  .on() on document
$( "p" ).live( "click", fn );
$( document ).on( "click", "p", fn );

Return value

• Returns the original jQuery object for chaining.
• The same handler can be bound multiple times (especially useful with different eventData).

Examples Gallery

All five examples follow the official jQuery API documentation for .on(). Use the Try-it links to attach handlers and see them fire interactively.

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

Click any paragraph → alert shows its text

this refers to the clicked p element

$(this).text() reads the paragraph content

function myHandler( event ) {
  alert( event.data.foo );
}

$( "p" ).on( "click", { foo: "bar" }, myHandler );

Click paragraph → alert shows "bar"

Same handler bound twice with different data → different alerts

event.data is set per binding, not per element

var count = 0;

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

Click "Click me!" → new paragraph appended

Click the new paragraph → another one appears

Handler bound once on body — no rebinding needed

$( "div.test" ).on({
  click: function() {
    $( this ).toggleClass( "active" );
  },
  mouseenter: function() {
    $( this ).addClass( "inside" );
  },
  mouseleave: function() {
    $( this ).removeClass( "inside" );
  }
});

Hover div.test → adds "inside" class

Mouse leave → removes "inside"

Click → toggles "active" class

$( "p" ).on( "myCustomEvent", function( event, myName ) {
  $( this ).text( myName + ", hi there!" );
  $( "span" ).text( "myName = " + myName ).fadeIn( 30 ).fadeOut( 1000 );
});

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

Click button → trigger("myCustomEvent", ["John"])

p text becomes "John, hi there!"

Extra trigger args arrive after the event object

🚀 Common Use Cases

• Button clicks — $("#save").on("click", saveForm) for direct UI actions.
• Dynamic lists — $("#cart").on("click", ".remove", removeItem) for AJAX-loaded rows.
• Form validation — $("form").on("submit.myValidator", validate) with namespace for clean teardown.
• Plugin initialization — bind under .myPlugin namespace; destroy with .off(".myPlugin").
• Component messaging — custom events like widget:refresh between loosely coupled modules.
• Performance — one delegated handler on tbody instead of 1,000 direct handlers on tr.

📝 Notes

• .on() was added in jQuery 1.7 and provides all functionality previously split across .bind(), .delegate(), and .live().
• Delegated handlers do not work for SVG elements in jQuery.
• Events like load, scroll, and error on some elements do not bubble — delegation is not supported for them; bind directly.
• Passing false as the handler is shorthand for a function that calls event.preventDefault() and event.stopPropagation().
• Handler order: handlers on the same element run in the order they were bound. Use event.stopImmediatePropagation() to block subsequent handlers on that element.
• For one-time handlers, consider .one() instead of manually calling .off() inside the handler.
• Attach delegated events as close to the target as possible — avoid $(document.body).on(...) for large apps when a closer container works.

💡 Best Practices