.on()?.on(events [, selector] [, data], handler) attaches event handlers to the selected elements (since 1.7). Omit selector for a direct bind; pass a selector for delegated events on current and future descendants.
// Direct
$("p").on("click", function () {
alert($(this).text());
});
// Delegated (dynamic children OK)
$("body").on("click", "p", function () {
$(this).after("Another paragraph!
");
});
// Remove with .off()
$("body").off("click", "p");| Need | Use |
|---|---|
| Attach handlers | .on() |
| Remove handlers | .off() |
| Run once | .one() |
| Fire an event | .trigger() |
| Legacy APIs | .delegate() / .live() |
.on()Pick direct binding for fixed elements, or delegation for lists that grow.
document)..on(events, handler) for a direct bind..on(events, selector, handler) to handle matching descendants.data, use namespaces (click.myPlugin), or an events object map..off().| Piece | Required? | Role |
|---|---|---|
events | Yes | Event name(s) / namespaces, or a map of event → handler |
selector | Optional | Filter descendants (delegation). Omit for direct binds |
data | Optional | Available as event.data in the handler |
handler | Yes* | Function to run, or false (*not needed with an events map) |
attach listener on ROOT for EVENTS
if no SELECTOR (direct):
when event reaches ROOT → run HANDLER
this = ROOT
if SELECTOR (delegated):
when event bubbles to ROOT:
if a matching descendant is on the path:
run HANDLER
this = that matched descendant
new matching children:
work automatically (delegated only)Core facts while wiring UI events.
| Topic | Detail |
|---|---|
| Returns | jQuery (chainable) |
| Since | 1.7 |
| Direct | .on(events, handler) |
| Delegated | .on(events, selector, handler) |
this | Bound element (direct) or matched descendant (delegated) |
false | Shorthand for function () { return false; } |
| Remove | .off() with matching filters |
Switch between direct and delegated binding — then add items and click them.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Bind a click handler straight to matching paragraphs.
$("p").on("click", function () {
$("#out").text($(this).text());
});p elements get a listener each.this is that paragraph.One listener on body — new paragraphs stay clickable.
$("body").on("click", "p", function () {
$(this).after("Another paragraph!
");
});body.p run the handler.this is the matched paragraph, not body.Pass an object and read it as event.data.
function myHandler(event) {
$("#out").text(event.data.foo);
}
$("button").on("click", { foo: "bar" }, myHandler);event.data.event.data.foo.Attach several handlers in one call.
$("#box").on({
click: function () {
$("#out").text("click");
},
mouseenter: function () {
$("#out").text("enter");
},
mouseleave: function () {
$("#out").text("leave");
}
});.on("mouseenter mouseleave", fn).Listen for a name you invent, then fire it with .trigger().
$("p").on("myCustomEvent", function (event, myName) {
$(this).text(myName + ", hi there!");
});
$("#fire").on("click", function () {
$("p").trigger("myCustomEvent", ["John"]);
});myCustomEvent with .on().event.Watch for these when attaching handlers.
Direct .on() only attaches to elements present now. Prefer delegation or wait for DOM ready.
Avoid dumping every delegated handler on document in large pages — attach nearer the content.
Official note: delegated event handlers do not work for SVG — bind directly when needed.
load, scroll, and error (and a few others) are poor fits for delegation — attach them directly.
.on() has been part of jQuery since 1.7 and is the standard event-binding API. It works wherever your loaded jQuery version runs.
Works in every browser that runs your loaded jQuery version. Prefer a current jQuery 3.x build for modern projects.
Bottom line: Production-ready. Use .on() / .off() for all new event code; migrate away from .bind(), .delegate(), and .live().
| Approach | Cost | Best for |
|---|---|---|
| One delegated handler near targets | Low | Long lists / dynamic UI |
| Handler per row | Higher | Avoid on large tables |
Many filters on document | Higher | Prefer closer roots + simple selectors |
mousemove / scroll floods | High | Throttle / keep handlers light |
Delegation is usually cheaper than mass direct binds. Keep selectors simple (tag, #id, .class) when filtering bubbled events.
.off(); use namespaces in plugins..on() over .bind(), .delegate(), and .live().One line: .on() is how modern jQuery attaches events — direct for fixed elements, delegated for dynamic ones.
Attach a handler that automatically removes itself after one run.
8 people found this page helpful