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:
<!DOCTYPE html>
<html>
<head>
<title>
delegate() Method in jQuery
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery script to add events -->
<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:
<!DOCTYPE html>
<html>
<head>
<title>
delegate() Method in jQuery
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery script for delegate() method -->
<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:
