.click() - Run Actions When an Element Is Clicked

jQuery

Created 2026-10-26 Last Modified 2026-10-26

jQuery's .click(handler) registers a function to run on click, while argument-free .click() triggers that event. In new code, register with .on("click", handler) and trigger with .trigger("click"). Delegate to a persistent parent when buttons added later must also work.

Separate binding from triggering and migrate

The .click() documentation marks this API deprecated since jQuery 3.3. Deprecation differs from removal: the shorthand and replacement comparison was executed successfully in both 3.7.1 and 4.0.0. New code here follows the documented .on() and .trigger() alternatives.

Purpose	Older shorthand	Recommended form
Bind a handler to current elements	.click(handler)	.on("click", handler)
Trigger from code	.click()	.trigger("click")
Include future descendants	Direct binding to existing elements is insufficient	Parent .on("click", descendant selector, handler)

handler is the function to execute when the event occurs. Pass the function reference rather than calling handler() immediately. Direct binding requires elements to exist when .on() runs; the example selects a persistent parent after document readiness.

Complete example comparing clicks, triggering and removal

Save the entire code as UTF-8 in click-demo.html and open it in a browser. No installation is needed, but loading the official jQuery file over its Content Delivery Network (CDN) requires internet. The code uses 4.0.0; clicking, adding, rebinding, removing handlers and resetting were executed with 3.7.1 and 4.0.0.

Alpha and the added Beta are task buttons. Other controls are not counted. Each task activation displays its name, increments the total and toggles its highlight. Every button has type="button" so placing the example in a form will not accidentally submit it.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Click handlers and delegated events</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    button { padding: 10px; margin: 4px; }
    .item.selected { outline: 3px solid #b66b00; background: #fff3cf; }
    #items { border: 1px solid #ccc; padding: 12px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Click handlers and delegated events</h1>
  <div id="items">
    <button type="button" class="item" id="first"><span>Alpha</span></button>
  </div>
  <button type="button" id="add">Add Beta</button>
  <button type="button" id="trigger">Trigger Alpha</button>
  <button type="button" id="bind">Enable or rebind</button>
  <button type="button" id="stop">Stop demo handler</button>
  <button type="button" id="reset">Reset</button>
  <p>Handler: <span id="status"></span></p>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      let clicks = 0;
      let last = "none";
      function render() {
        $("#result").text(`last=${last} | clicks=${clicks}`);
      }
      function handleClick(event) {
        clicks++;
        last = $(this).text();
        $(this).toggleClass("selected");
        render();
      }
      function bind() {
        $("#items").off("click.demo", ".item")
          .on("click.demo", ".item", handleClick);
        $("#status").text("enabled");
      }
      $("#add").on("click", function () {
        if (!$("#second").length) {
          $("<button>").attr({ type: "button", id: "second" })
            .addClass("item").text("Beta").appendTo("#items");
        }
      });
      $("#trigger").on("click", () => $("#first").trigger("click"));
      $("#bind").on("click", bind);
      $("#stop").on("click", function () {
        $("#items").off("click.demo", ".item");
        $("#status").text("stopped");
      });
      $("#reset").on("click", function () {
        $("#second").remove();
        $("#first").removeClass("selected");
        clicks = 0;
        last = "none";
        bind();
        render();
      });
      bind();
      render();
    });
  </script>
</body>
</html>

Initially Handler shows enabled and the result is:

last=none | clicks=0

Click Alpha for last=Alpha | clicks=1 and a highlight. Trigger Alpha invokes the same button from code, bringing the count to 2 and removing its highlight.
Choose Add Beta, then Beta, for last=Beta | clicks=3. Repeated additions check the second ID and create only one Beta.
Press Enable or rebind repeatedly, then Alpha once: the count becomes 4. Duplicate registration does not multiply the increment.
Stop demo handler changes Handler to stopped. Task activation no longer changes this demo's count or highlights. Enable or rebind resumes it.
Reset removes Beta and Alpha's highlight, resets the count to zero and enables the handler. Alpha then starts at 1 again.

Dynamic buttons, this and event.target

Delegation with .on() binds to the existing #items and handles clicks from matching .item descendants. It uses bubbling, the propagation of clicks toward parents, so Beta needs no new binding. Code stopping propagation on the way can prevent the delegated handler from being reached.

In the ordinary handleClick function, this refers to the button matching .item. Clicking Alpha's inner span may make event.target that span, while this remains the button, letting you change the whole button's class. Do not casually replace the function with an arrow when relying on this. Native buttons also let you focus and activate the example with Enter.

Remove only the intended handler and avoid duplicates

.off() receives the event namespace and the same delegation selector to remove this demo's handler. In click.demo, click names the event and demo identifies the handler group. Calling .off("click.demo", ".item") before rebinding keeps repeated Enable or rebind actions to one invocation.

Calling a parent's .off() without arguments can remove other features' handlers too. Scope removal to the intended feature. Reset clears the demo's added item, highlight and counter before enabling its handler again.

Compare legacy .click() and its replacement

Run this fragment in the developer console. Two temporary buttons, unattached to the page, compare the old and recommended forms. Each runs once:

let legacy = 0;
const $old = $("<button>").click(() => legacy++);
$old.click();
console.log(legacy);
let modern = 0;
$("<button>").on("click", () => modern++).trigger("click");
console.log(modern);

1
1

.trigger() invokes registered event processing and may bubble. It does not perfectly reproduce real user input, so do not assume equivalent behavior for operations requiring browser user activation. This exercise compares ordinary button counters and classes.

If nothing responds, inspect jQuery loading in Network and errors/version in Console. Check selectors, whether the parent existed at binding time and whether Stop is active. Multiple invocations from one click call for checking repeated initialization and handler-removal scope.

jQuery