jQuery delegate() Method in jQuery is used to add one or more event handlers to the specified element that are children of selected elements and is also used to specify a function to run whenever the event occurs.
Syntax:
$(selector).delegate( childSelector, event, data, function )
Parameters:
This method accepts four parameters as mentioned above and described below:
- childSelector: It is a required parameter and is used to specify one or more child elements attached to the event handler.
- event: It is a required parameter and is used to specify one or more events attached to the elements. Multiple event values are separated by space and it must be a valid event.
- data: It is an optional parameter and is used to specify the additional data to pass along the function.
- function: It is a required parameter and is used to specify the function to run when the event occurs.
Example 1:
html
<!DOCTYPE html>
< html >
< head >
< title >
delegate() Method in jQuery
</ title >
< script src =
</ script >
< script >
$(document).ready(function () {
$("div").delegate("h3", "click", function () {
$("h3").css("background-color", "green");
});
});
</ script >
</ head >
< body >
< center >
< h1 >Welcome to GeeksforGeeks!</ h1 >
< p >
Click on the below element (lightgreen
background) to change background-color
</ p >
< div style = "background-color:lightgreen;" >
< h3 >GeeksForGeeks</ h3 >
</ div >
< h3 >GeeksForGeeks.</ h3 >
</ center >
</ body >
</ html >
|
Output:
Example 2:
html
<!DOCTYPE html>
< html >
< head >
< title >
delegate() Method in jQuery
</ title >
< script src =
</ script >
< script >
$(document).ready(function () {
$("div").delegate("h3", "click", function () {
$(this).slideToggle();
});
$("button").click(function () {
$("< h3 >This show how the delegate Method"
+ " works .</ h3 >").insertAfter("button");
});
});
</ script >
</ head >
< body >
< center >
< h1 >Welcome to GeeksforGeeks!.</ h1 >
< div style = "background-color:green" >
< h3 >GeeksforGeeks.</ h3 >
< h3 >The delegate Method.</ h3 >
< button >Click</ button >
</ div >
</ center >
</ body >
</ html >
|
Output:
Last Updated :
11 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...