jQuery undelegate() method

The undelegate() method in jQuery is used to remove the event handlers attached using the jQuery delegate() method. This method is deprecated in jQuery version 3.0.

Syntax

This method accepts three optional parameters that are described as follows -

selector: It is an optional parameter. It specifies the selector from which the event handlers should be removed.

event: It is an optional parameter. This parameter specifies one or multiple events to remove from the selected elements. If we have to specify multiple events, the event values must be separated by a space.

function: It is also an optional parameter. It specifies a particular event handler function to remove.

If the undelegate() method is called without arguments, the method will remove all handlers attached to the elements. If we have to remove particular event handlers, we can provide the combinations of event names, selectors, and handler function name.

Now, let's see some illustrations to understand the use of the undelegate() method.

Example1

It is a simple example of using the undelegate() method. Here, we are using the optional parameter event of the undelegate() method. So, the method will remove the corresponding event passed to it. In this example, there are two h3 heading elements and a button. When a user hovers the h3 element with the text "Hover me", the delegate() method will attach the mouseover event to the corresponding element. On clicking the given button, the attached event will be removed.

We can check the working of the undelegate() method by first hovering an h3 element and then clicking the button before hovering another h3 element. On hovering one h3 heading, the corresponding element's style will get changed, and when we click the given button, the hovering will not affect another h3 element.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
   $(document).ready(function(){
   $("body").delegate("h3", "mouseover", function(){
	   $(this).css({"background-color": "pink", "font-size": "25px"});
      });
      $("button").click(function(){
         $("body").undelegate("mouseover");
      });
   });
</script>
</head>
<body>
<h2> It is an example of using the jQuery undelegate() method. </h2>
<p> Move the cursor over the text <b> <i> "Hover me" </i> </b> to attach the mouseover event. </p>
<h3> Hover me </h3>
<button> Remove event </button>
<h3> Hover me </h3>
</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

On moving the cursor on the first h3 element, the output will be -

After clicking the given button, nothing will happen when we hover another h3 element because the event is removed.

Example2

It is another example of using the undelegate() method. In this example, we are using the undelegate() method to remove an event handler once the event has been triggered a certain number of times. Here, there is a heading h3 (with the text "Click me"), whose size can only increase thrice. It is because the undelegate() function will remove its click event once it is triggered three times. With every click, the size of the heading will increase by 10px.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
var i = 0, j = 1;
$("h3").click(function(e){
$("h3").animate({fontSize: "+=10px"}).text(j + " times");
i++;
j++;
if (i >= 3) {
$(this).undelegate(e);
}
});
});
</script>
</head>
<body>
<h2> It is an example of using the jQuery undelegate() method. </h2>
<p> The style of the following heading can only be changed thrice. </p>
<p> Click the follwing text to see the effect. </p>
<h3 style = "border: 2px solid black"> Click me </h3>
</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

The heading h3 with text click me can only be clicked thrice. After clicking the text Click me three times, the output will be -

Example3

In this example, we are using all optional parameters of the undelegate() method. Here, there are two functions named as the font() and size(), one is for increasing the font size, and another is to increase the width and height. When the user hovers the bordered text, the mouseover event and size() function will be attached to it, and on clicking the bordered text, the click event and font() function will be attached to it.

Here, we are using the undelegate() function to only remove the mouseover event and size() function from the bordered text. So, after clicking the button, hovering will not affect the bordered text, but the user still clicks it to increase its font size.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
function font() {
$(this).animate({fontSize: "+=5px"});
}
function size() {
$(this).animate({width: "+=20px"});
$(this).animate({height: "+=20px"});
}
$(document).ready(function(){
  $("body").delegate("p", "click", font);
  $("body").delegate("p", "mouseover", size);
  $("button").click(function(){
    $("body").undelegate("p", "mouseover", size);
  });
});
</script></head>
<body>
<h2> It is an example of using the jQuery undelegate() method. </h2>
<span> Move the cursor as well as click the below paragraph element to attach the <b> <i> "mouseover" </b> </i> and  <b> <i> "click" </b> </i> events. </span>
<p style = "border:2px solid black; width: 50%;"> This is a paragraph. </p>
<span> Click the below button to remove the <b> <i> "mouseover" </b> </i> event. </span> </br></br>
<button> Remove event </button>
</body>
</html>

Test it Now

Output