jQuery .unbind() Method

Beginner
7 min read
Updated: Oct 2026
5 examples
Live preview
Definition

What Is .unbind()?

.unbind() (since 1.0, deprecated 3.0) removes event handlers that were attached with .bind(). Modern code should use .on() / .off() instead.

Remember
// Legacy
$("#foo").bind("click", handler);
$("#foo").unbind("click", handler);

// Recommended (jQuery 1.7+)
$("#foo").on("click", handler);
$("#foo").off("click", handler);

// Remove all handlers on the element
$("#foo").unbind();
NeedUse
Modern remove.off()
Modern attach.on()
Run once then auto-remove.one()
Legacy delegated remove.undelegate()
Fire handlers in code.trigger()
Approach

How to Use .unbind()

Pick the overload that matches how precise you need the removal to be.

  1. Attach with .bind(type, handler) (or migrate to .on()).
  2. Store a named function if you need to remove that handler only.
  3. Call .unbind(), .unbind(type), or .unbind(type, handler).
  4. Prefer namespaces for plugins: .unbind(".myPlugin").
  5. New code: use .off() with the same patterns.
SignatureSinceRole
.unbind()1.0Remove all handlers on the elements
.unbind(type)1.0Remove handlers for that event type
.unbind(type, handler)1.0Remove one specific function
.unbind(type, false)1.4.3Undo .bind(type, false)
.unbind(event)1.0Unbind the current handler from inside itself

Pseudocode

Pseudocode
call .unbind([eventType] [, handler | false])
  or .unbind(eventObject)

for each matched element:
    if no arguments:
        remove every attached handler
    else if eventObject:
        remove the handler that matches this event
    else if handler provided:
        remove only that function for eventType
    else if false:
        remove the "return false" binding for eventType
    else:
        remove all handlers for eventType (and namespace if given)

return the jQuery collection
Reference

Cheat Sheet

Keep these facts handy when reading or migrating legacy event code.

TopicDetail
StatusDeprecated since jQuery 3.0
Pairs with.bind() (legacy)
Modern pair.on() / .off()
Specific handlerNeeds the same function reference
Namespace.unbind("click.myEvents") or .unbind(".myEvents")
Self-unbind.unbind(event) inside the handler
Anonymous failTwo identical inline fns ≠ same reference
Try it

Live Preview

Bind and unbind a named click handler on the sample button — same idea as the official demo.

Sample target: the button below. After Bind, click it to fire the handler.

Result
Ready — pick an action and click Run.
Code

jQuery Examples

Short, copy-ready snippets. Prefer .off() when writing new code.

Example 1 — Official Bind / Unbind Demo

Attach a named click handler, then remove that same reference.

jQuery
function aClick() {
  $("#log").text("Handler ran!");
}

$("#bind").on("click", function () {
  $("#theone").bind("click", aClick).text("Can Click!");
});

$("#unbind").on("click", function () {
  $("#theone").unbind("click", aClick).text("Does nothing...");
});
Try It Yourself

How It Works

  1. Name. Store aClick as a shared function.
  2. Bind. .bind("click", aClick) attaches it.
  3. Unbind. Pass the same aClick to remove it.
  4. Label. Update button text to show state.

Example 2 — Unbind by Event Type

Remove every click handler, or wipe all handlers on the element.

jQuery
$("p").bind("click", function () {
  $("#log").text("clicked");
});

$("p").unbind("click"); // all click handlers
// $("p").unbind();    // every handler type
Try It Yourself

How It Works

  1. Attach. Bind a click handler.
  2. Type. .unbind("click") clears all click handlers.
  3. Broad. Bare .unbind() clears every type.
  4. Careful. Broad removes can break other scripts on the same node.

Example 3 — Same Reference Required

Passing a new anonymous function does not remove the original handler.

jQuery
var foo = function () {
  $("#log").text("foo ran");
};

$("button").bind("click", foo);
$("button").unbind("click", foo); // works

// Will NOT work — different function object:
// $("button").unbind("click", function () { … });
Try It Yourself

How It Works

  1. Store. Keep the handler in a variable.
  2. Match. Unbind with that exact reference.
  3. Identity. JS compares objects, not source text.
  4. Alt. Use a namespace if you cannot keep the reference.

Example 4 — Namespace Unbind

Namespaces let you remove your handlers without touching others.

jQuery
$("#foo").bind("click.myEvents", function () {
  $("#log").text("myEvents click");
});

$("#foo").unbind("click.myEvents"); // precise
// $("#foo").unbind(".myEvents");  // whole namespace
Try It Yourself

How It Works

  1. Dot. click.myEvents tags the binding.
  2. Precise. Unbind that type + namespace only.
  3. Broad ns. .unbind(".myEvents") clears the whole namespace.
  4. Plugins. Ideal when multiple scripts share an element.

Example 5 — Unbind from Inside the Handler

Pass the event object to remove the current handler after N runs.

jQuery
var timesClicked = 0;

$("#foo").bind("click", function (event) {
  timesClicked++;
  $("#log").text("clicks: " + timesClicked);
  if (timesClicked >= 3) {
    $(this).unbind(event);
  }
});
Try It Yourself

How It Works

  1. Count. Close over timesClicked.
  2. Event. The handler receives the event object.
  3. Unbind. .unbind(event) removes this handler only.
  4. Modern. Prefer .one() or .off() for new code.

Edge Cases & Pitfalls

These mistakes show up most often with legacy unbind code.

deprecated

Do not use in new code

Migrate to .off(). It covers direct and delegated handlers.

reference

Anonymous twins do not match

Keep a named variable, or unbind by type/namespace.

proxy

Proxied handlers share one function

Unbinding a proxied handler can remove all proxied events on that element. Prefer unique namespaces (e.g. click.proxy1).

broad

Bare .unbind() is aggressive

It removes every handler. Prefer type + handler or a namespace in shared UI.

Compatibility

Browser Support

.unbind() has been part of jQuery since 1.0. Deprecated in 3.0 in favor of .off() (since 1.7). Still present in jQuery 3.x for legacy apps.

✓ Deprecated · jQuery 1.0+

jQuery .unbind()

Works wherever your jQuery build runs, but new code should use .off(). Prefer current jQuery 3.x+ with .on/.off.

100% jQuery core
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
.unbind() Legacy

Bottom line: Fine for reading old code. For new projects, always pair .on() with .off().

Analysis

Performance Notes

ApproachCostBest for
Precise .unbind(type, fn)CheapTargeted cleanup
Namespace unbindCheapPlugins / shared elements
Bare .unbind() oftenRiskyAvoid on shared DOM nodes

Unbinding is inexpensive. The cost is accidental removal of other handlers — prefer named functions or namespaces.

Remember

Key Takeaways

  • Role: remove handlers attached with .bind().
  • Deprecated: use .off() for new code (since 1.7 / 3.0).
  • Precise: pass the same function reference or a namespace.
  • Self-remove: .unbind(event) from inside the handler.

One line: .unbind() is the legacy remover for .bind() — learn it to read old code, write .off() in new code.

Frequently Asked Questions

.unbind() removes event handlers attached with .bind(). You can remove all handlers, filter by event type, pass a specific handler reference, use namespaces, or pass an event object from inside a running handler.
Yes, but it has been deprecated since jQuery 3.0. Prefer .off() (available since 1.7) for new code.
Replace .bind(type, fn) with .on(type, fn) and .unbind(type, fn) with .off(type, fn). Namespace forms map the same way: .unbind(".myPlugin") → .off(".myPlugin").
JavaScript compares function references, not source text. .unbind("click", fn) needs the exact same fn passed to .bind(). Store the handler in a named variable.
.unbind() removes direct handlers from .bind(). .off() removes handlers from .on() — direct and delegated — and is the modern replacement for .unbind(), .undelegate(), and .die().
Bind with .bind("click.myEvents", fn), then .unbind("click.myEvents") removes only that binding, or .unbind(".myEvents") removes every handler in the namespace.

Next: unload event

Learn the unload browser event and why modern apps prefer pagehide / visibility APIs.

unload event tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

13 people found this page helpful

jQuery .off() Method jQuery Unload Event