jQuery .one() Method

What Is .one()?

.one(events [, selector] [, data], handler) is like .on(), except the handler is unbound after its first run on that element for that event type (since 1.1; full .on()-style signatures since 1.7).

$("#foo").one("click", function () {
  alert("This will be displayed only once.");
});

// Equivalent idea:
$("#foo").on("click", function (event) {
  alert("This will be displayed only once.");
  $(this).off(event);
});

How to Use .one()

Use the same patterns as .on() when you only want the first fire.

1. Select the element(s) that should react once.
2. Call .one(events, handler) (or with selector / data like .on()).
3. First matching event runs the handler.
4. jQuery unbinds that handler for that element and event type.
5. Further matching events on that element do nothing for that binding.

Pseudocode

attach handler like .on(...)

when EVENT fires on ELEMENT (or matching descendant):
    run HANDLER once
    unbind this handler for ELEMENT + EVENT type

later same EVENT on same ELEMENT:
    this binding does not run again

note:
    multiple event types → once per type

Cheat Sheet

Quick facts for one-shot handlers.

Live Preview

Click the target once — then again. Compare with a normal .on() bind.

Ready — Run “one”, then click Target twice.

jQuery Examples

Short, copy-ready snippets. Prefer .one() over manual .off(event) for simple one-shot cases.

$("#foo").one("click", function () {
  $("#out").text("Fired once — click again does nothing.");
});

First click → message updates
Second click → no change from this handler

var n = 0;
$(".box").one("click", function () {
  var index = $(".box").index(this);
  $("#out").text(
    "Box #" + index + " clicked. Total unique: " + (++n)
  );
});

Click box 0 → counts
Click box 0 again → ignored
Click box 1 → counts again

var n = 0;
$(".target").one("click mouseenter", function (event) {
  $("#out").text(++n + " · " + event.type);
});

mouseenter → 1 · mouseenter
click → 2 · click
further same types → ignored

$("#list").one("click", "button.item", function () {
  $("#out").text("Once: " + $(this).text());
});

First matching child click → runs
Any later item click → ignored (root shot spent)

$("#a").one("click", function () {
  $("#out").text("via .one()");
});

$("#b").on("click", function (event) {
  $("#out").text("via .on() + .off(event)");
  $(this).off(event);
});

Both buttons fire only on first click
Second clicks do nothing

Performance Notes

.one() is cheap and self-cleaning. For thousands of items, one delegated handler with your own “already handled” check can be leaner.

Key Takeaways