click Event?click is sent when the mouse button is pressed and released while the pointer stays inside an element. Bind it with .on("click", handler) (jQuery 1.7+).
$("#target").on("click", function () { ... })
$("#target").trigger("click")
// Needs: mousedown + mouseup inside the element
// Prefer on/trigger — not the deprecated .click()| Need | Use |
|---|---|
| Bind handler | .on("click", handler) |
| Fire event | .trigger("click") |
| Delegation | .on("click", "li", handler) |
| Press only | mousedown |
clickSelect an element, bind with .on, optionally trigger from code.
$("#btn"), $("p"), etc..on("click", function (event) { ... }).$(this) for the bound element; read event for details..trigger("click"). Unbind with .off("click").| Piece | Required? | Role |
|---|---|---|
"click" | Yes | Event type string for .on / .trigger |
handler | Yes (bind) | Runs on each click |
eventData | Optional | Extra data passed into the handler |
| Return value | — | jQuery set (chainable) |
function onClick(element, handler):
when mouse down inside element
and mouse up inside element:
handler(event)
trigger(element, "click"):
run all click handlers on element
(may also run default browser action)Keep these facts handy while wiring click handlers.
| Topic | Detail |
|---|---|
| Bind | .on("click", handler) (1.7+) |
| Trigger | .trigger("click") (1.0+) |
| Sequence | Press + release inside the element |
| Delegation | .on("click", childSelector, fn) |
| Unbind | .off("click") |
| Deprecated | .click() shorthand (3.3+) |
Click the demo control (or use presets) to see on("click") in action.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Official style: .on("click", …) on a target element.
$("#target").on("click", function () {
console.log("Handler for click called.");
});#target..on("click", handler).Fire the same handlers without a real mouse click.
$("#target").on("click", function () {
console.log("Handler for click called.");
});
$("#other").on("click", function () {
$("#target").trigger("click");
});#target.#target’s click handlers.#target.One parent handler covers current and future children.
$("#list").on("click", "li", function () {
console.log("Clicked: " + $(this).text());
});
// Later…
$("#list").append("<li>New item</li>");
// New item is clickable too — no extra bind#list, filter with "li".li (or its children) to the list.li.append.Official demo idea: each paragraph hides itself when clicked.
$("p").on("click", function () {
$(this).hide();
});p.Watch these when relying on click handlers.
.click() shorthandDeprecated in 3.3. Use .on("click") / .trigger("click") / .off("click").
If the pointer leaves before release, you may get mousedown/mouseup without click. Use those events when that matters.
Binding only existing elements misses later inserts. Prefer .on("click", "child", fn) on a stable parent.
this ≠ always event.targetClicks on nested spans/icons set event.target to the child. Use this (or event.currentTarget) for the bound element.
The native click event works in all browsers. Bind with .on("click") since jQuery 1.7; .trigger("click") since 1.0. Prefer these over the deprecated .click() shorthand (3.3+).
Supported everywhere jQuery event APIs run in the browser. Use on/trigger for modern code.
Bottom line: Bind with .on("click", fn). Trigger with .trigger("click"). Use delegation for dynamic lists.
| Approach | Cost | Best for |
|---|---|---|
Direct .on("click") | 1 handler / element | Few static controls |
Delegated .on | 1 handler / parent | Lists / tables / dynamic UI |
| Many direct binds | Higher memory | Avoid on large collections |
Delegation scales better than binding hundreds of individual click handlers. Always .off when removing long-lived widgets to avoid leaks.
.on("click", handler) — not deprecated .click()..trigger("click") for programmatic clicks.One line: use .on("click", fn) to listen and .trigger("click") to fire — prefer that over the deprecated .click() shorthand.
See the deprecated helper and how it maps to on / trigger.
9 people found this page helpful