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 neveropen!.</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.
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
