Unbinding Events with off()
off removes an event handler.
In this page:
Syntax
$(selector).off("eventName", handler);
$(selector).off("eventName");
$(selector).off();Remove a Handler
Calling off() on an element detaches a previously attached handler so it stops responding to that event. It's the standard cleanup method for undoing whatever on() previously set up.
Example: Remove a Handler
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<button id="btn">Click</button>
<button id="removeBtn">Remove Handler</button>
<div id="output"></div>
</section>
<script>
var original = $("#demo").html();
function init() {
function handler() { $("#output").text("Clicked!"); }
$("#btn").on("click", handler);
$("#removeBtn").on("click", function() {
$("#btn").off("click", handler);
$("#output").text("Handler removed");
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>Remove All Click Handlers
Calling off(click) with just an event name removes every click handler currently attached to the selected elements, regardless of which function each one was.
Example: Remove All Click Handlers
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<button id="btn">Click</button>
<button id="removeBtn">Remove Handler</button>
<div id="output"></div>
</section>
<script>
var original = $("#demo").html();
function init() {
$("#btn").on("click", function() { $("#output").append("Handler A fired. "); });
$("#btn").on("click", function() { $("#output").append("Handler B fired. "); });
$("#removeBtn").on("click", function() {
$("#btn").off("click");
$("#output").text("Both handlers removed");
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>Remove One Named Handler
Passing the same function reference used in on() as off()'s second argument removes only that specific handler, leaving any other click handlers on the same element untouched.
Example: Remove One Named Handler
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<button id="btn">Click</button>
<button id="removeBtn">Remove Handler</button>
<div id="output"></div>
</section>
<script>
var original = $("#demo").html();
function init() {
function handlerA() { $("#output").append("A fired. "); }
function handlerB() { $("#output").append("B fired. "); }
$("#btn").on("click", handlerA);
$("#btn").on("click", handlerB);
$("#removeBtn").on("click", function() {
$("#btn").off("click", handlerA);
$("#output").text("Handler A removed (B still active)");
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>Remove Delegated Handler
When the original handler was delegated with a selector, off() needs that same selector passed as its second argument to correctly remove the delegated handler rather than leaving it attached.
Example: Remove Delegated Handler
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<ul id="list"><li>Item</li></ul>
<button id="removeBtn">Remove Handler</button>
<div id="output"></div>
</section>
<script>
var original = $("#demo").html();
function init() {
function handler() { $("#output").text("Clicked!"); }
$("#list").on("click", "li", handler);
$("#removeBtn").on("click", function() {
$("#list").off("click", "li", handler);
$("#output").text("Handler removed");
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>Use Namespaces
Namespacing an event, like on('click.myPlugin', fn), lets you later call off('.myPlugin') to remove every handler under that namespace at once, without accidentally removing unrelated click handlers elsewhere in the code.
Example: Use Namespaces
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="resetBtn">Reset</button>
<section id="demo">
<button id="btn">Click</button>
<button id="removeBtn">Remove Handler</button>
<div id="output"></div>
</section>
<script>
var original = $("#demo").html();
function init() {
$("#btn").on("click.myPlugin", function() { $("#output").append("Namespaced handler fired. "); });
$("#btn").on("click", function() { $("#output").append("Regular handler fired. "); });
$("#removeBtn").on("click", function() {
$("#btn").off(".myPlugin");
$("#output").text("Namespaced handler removed (regular still active)");
});
}
init();
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
init();
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Trying to remove an anonymous handler with
.off("click", function() {...}), which fails because a new function is a different reference from the one attached. - Calling
.off("click")and accidentally removing every click handler on that element, including ones added by other code or plugins. - Removing a delegated handler with plain
.off("click")on the child when it was bound on the parent with.on("click", "li", fn), so it stays attached.
🔒
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: