.undelegate()

Categories: Deprecated > Deprecated 3.0 | Events > Event Handler Attachment

.undelegate()Returns: jQueryversion deprecated: 3.0

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

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().

Examples:

Can bind and unbind events to the colored button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>undelegate demo</title>
  <style>
  button {
    margin: 5px;
  }
  button#theone {
    color: red;
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
 
<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
 
<script>
function aClick() {
  $( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).on( "click", function() {
  $( "body" )
    .delegate( "#theone", "click", aClick )
    .find( "#theone" ).text( "Can Click!" );
});
$( "#unbind" ).on( "click", function() {
  $( "body" )
    .undelegate( "#theone", "click", aClick )
    .find( "#theone" ).text( "Does nothing..." );
});
</script>
 
</body>
</html>

Demo:

To unbind all delegated events from all paragraphs, write:

1
 
$( "p" ).undelegate();

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

1
 
$( "p" ).undelegate( "click" );

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

1
2
3
4
5
6
7
8
9
 
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 );

To unbind all delegated events by their namespace:

1
2
3
4
5
6
7
8
9
10
11
 
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" );