.undelegate()

Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.

.undelegate()🡢 jQuery

.undelegate(selector, eventType)🡢 jQuery

selector StringA selector which will be used to filter the event results.
eventType StringA string containing a JavaScript event type, such as "click" or "keydown"

.undelegate(selector, eventType, function(eventObjectEvent))🡢 jQuery

selector StringA selector which will be used to filter the event results.
eventType StringA string containing a JavaScript event type, such as "click" or "keydown"
function(eventObjectEvent) FunctionA function to execute at the time the event is triggered.

.undelegate(selector, events)🡢 jQuery

selector StringA selector which will be used to filter the event results.
events PlainObjectAn object of one or more event types and previously bound functions to unbind from them.

.undelegate(namespace)🡢 jQuery

namespace StringA string containing a namespace to unbind all events from.

As of jQuery 3.0, .undelegate() has been deprecated. It was superseded by the .off() method since jQuery 1.7, so its use was already discouraged.

The .undelegate() method is a way of removing event handlers that have been bound using .delegate().

Can bind and unbind events to the colored button.

JS
<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display: none">Click!</div>
CSS
button {
  margin: 5px;
}
button#theone {
  color: red;
  background: yellow;
}
HTML
function aClick() {
  $("div").show().fadeOut("slow");
}
$("#bind").click(function () {
  $("body")
    .delegate("#theone", "click", aClick)
    .find("#theone")
    .text("Can Click!");
});
$("#unbind").click(function () {
  $("body")
    .undelegate("#theone", "click", aClick)
    .find("#theone")
    .text("Does nothing...");
});
DEMO

To unbind all delegated events from all paragraphs, write:

HTML
$("p").undelegate();
DEMO

To unbind all delegated click events from all paragraphs, write:

HTML
$("p").undelegate("click");
DEMO

To undelegate just one previously bound handler, pass the function in as the third argument:

HTML
var foo = function () {
  // Code to handle some kind of event
};

// ... Now foo will be called when paragraphs are clicked ...
$("body").delegate("p", "click", foo);

// ... foo will no longer be called.
$("body").undelegate("p", "click", foo);
DEMO

To unbind all delegated events by their namespace:

HTML
var foo = function () {
  // Code to handle some kind of event
};

// Delegate events under the ".whatever" namespace
$("form").delegate(":button", "click.whatever", foo);

$("form").delegate("input[type='text'] ", "keypress.whatever", foo);

// Unbind all events delegated under the ".whatever" namespace
$("form").undelegate(".whatever");
DEMO

Looking for a Web Developer?

👋

Hi! I'm Basti, author of this site. If you are looking for a web developer with 15+ years of experience, holla at me!

Be it the good 'ol jQuery, vanilla JS or modern frameworks like Vue and Svelte, front- or backend, I can help you.

Just write me at jobs@jqapi.com :)