jQuery delegate() Method
Last Updated :
11 Jan, 2024
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...