OpenJS Foundation - openjsf.org · api.jquery.com

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

  • version added: 1.4.2.undelegate()

    • This signature does not accept any arguments.

  • version added: 1.4.2.undelegate( selector, eventType )

    • selector

      A selector which will be used to filter the event results.

    • eventType

      A string containing a JavaScript event type, such as "click" or "keydown"

  • version added: 1.4.2.undelegate( selector, eventType, handler )

    • selector

      A selector which will be used to filter the event results.

    • eventType

      A string containing a JavaScript event type, such as "click" or "keydown"

    • handler

      A function to execute at the time the event is triggered.

  • version added: 1.4.3.undelegate( selector, events )

    • selector

      A selector which will be used to filter the event results.

    • events

      An object of one or more event types and previously bound functions to unbind from them.

  • version added: 1.6.undelegate( namespace )

    • namespace

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

Examples:

Example 1

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-4.0.0.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:

Example 2

To unbind all delegated events from all paragraphs, write:

1

$( "p" ).undelegate();

Example 3

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

1

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

Example 4

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 );

Example 5

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" );

Read the original on api.jquery.com ↗