jQuery undelegate() Method
Last Updated :
07 Jul, 2023
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 >
< 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 >
< p >Welcome to GeeksforGeeks!.</ p >
</ div >
< 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 >
< 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 >
< 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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...