Open In App

jQuery undelegate() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The jQuery undelegate() method is an inbuilt method that is used to remove the specified event handler from the selected element.

Syntax:

$(selector).undelegate(selector, event, function)

Parameters: This method accepts three parameters as mentioned above and described below:

  • selector: It is an optional parameter that is used to specify the selector from which the event will remove.
  • event: It is an optional parameter that is used to specify the name of the event type on the selector.
  • function: It is an optional parameter that is used to specify the name of the handler function to remove.

The below examples illustrate the undelegate() method in jQuery: 
Example 1: This example does not contain any parameters. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>The undelegate Method</title>
    <script src=
    </script>
 
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("body").delegate("p", "click", function () {
                $(this).css("font-size", "25px");
            });
            $("button").click(function () {
                $("body").undelegate();
            });
        });
    </script>
    <style>
        div {
            width: 300px;
            height: 100px;
            background-color: lightgreen;
            padding: 20px;
            font-weight: bold;
            font-size: 20px;
            border: 2px solid green;
        }
 
        button {
            margin-top: 10px;
        }
    </style>
</head>
 
<body>
    <div>
        <!-- click on this p element -->
        <p>Welcome to GeeksforGeeks!.</p>
    </div>
    <!-- click on this button to remove the
        event handler -->
    <button>Remove...!</button>
</body>
 
</html>


Output: 

Note: First click on the button and then click on the paragraph, then no changes occur. 

Example 2: This example contains all parameters. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>The undelegate Method</title>
    <script src=
    </script>
 
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function () {
            $("body").delegate("div", "click", function () {
                $(this).animate({
                    height: "+=100px"
                });
                $(this).animate({
                    width: "+=100px"
                });
            });
            $("button").click(function () {
                $("body").undelegate("div", "click");
            });
        });
    </script>
    <style>
        div {
            width: 30px;
            height: 30px;
            background-color: green;
        }
 
        button {
            margin-top: 10px;
        }
    </style>
</head>
 
<body>
    <div></div>
    <!-- click on this button -->
    <button>Click here..!</button>
</body>
 
</html>


Output: 

Note: If click on the button and then click on the div element then no change in the size will take place.



Last Updated : 07 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads