Introduction to jQuery delegate()
JQuery delegate() method is one of the many built in functions available in javascript library, which can be used as an event handler option. It can be used for multiple events handling, multiple elements & their corresponding children, and it can be used not only on current events but also on future events. The syntax for this method is ‘$(selector).delegate(childSelector, event, data, function)’, where childSelector is used to represent element needs event handling, event is used to represent the actual event, data is used to represent the data related to the event, and function is used to represent the specific function expected to be performed on the event as a part of event handling process.
Syntax
$(selector).delegate(childSelector, event, data, function)Parameters
- ChildSelector: ChildSelector is not an optional parameter. ChildSelector is used to specify elements on which to work the event handler.
- Event: Event is also not an optional parameter. The event specifies the kind of events to attach to the elements. It can have one or more events, each event separator used as space.
- Data: Data is optional. Data used to specify the function’s data pass.
- Function: Function is optional. The function used to specify the function name which is to be executed if an event occurs.
Examples of jQuery delegate()
Below given are examples of jQuery delegate:
Example #1
The method with childSelector, event and function parameters
Next, we write the HTML code to understand the jQuery delegate( ) method more clearly with the following example:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery delegate() Method
</title>
<style>
p {
background: red;
font-weight: bold;
cursor: pointer;
padding: 6px;
}
span {
color: red;
}
p.over {
background: #fff;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js" > </script>
</head>
<body>
<p> This is a main paragraph. Click here for next.</p>
<script>
$( "body" ).delegate( "p", "click", function() {
$(this ).after( "<p> Click here for another paragraph. </p>" );
});
</script>
</body>
</html>Output:
Once click on the text, the output is:
Once again if we click on any of the text, the text “Click here for another paragraph” display, as shown in the below output:
In the above code, the delegate( ) method passes childSelector as p Html element, event as click event and function is after the ( ) function which is to be executed when that p element is clicked, so when we click the text the second text is display.
In the above code, the after( ) method is also using. The use of after( ) method is to insert specified content after each element in the set of matched elements.
Example # 2
Method to change the background-color
Next example code where when we click onto the text, the text color is changed to the blue color by using the jQuery delegate( ) method.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery delegate() Method
</title>
<style>
p {
background: red;
font-weight: bold;
cursor: pointer;
padding: 6px;
}
span {
color: red;
}
p.over {
background: #fff;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js" > </script>
</head>
<body>
<p> This is a main paragraph. Click here to change the background colour. </p>
<script>
$( "body" ).delegate( "p", "click", function() {
$("p").css("background-color", "blue");
});
</script>
</body>
</html>The output of the above code is:
Once we click 6n the text, the output is:
Example #3
Method to attach an event handler for the children of selected elements
Next example code where the showing the children of <div> tag that is <h3> tag attach the event change background colour by using the jQuery delegate( ) method.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
This is an example for jQuery delegate() Method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
h3 {
background: red;
font-weight: bold;
cursor: pointer;
padding: 6px;
}
</style>
<!-- jQuery code to add an events -->
<script>
$(document).ready(function() {
$("div").delegate("h3", "click", function() {
$("h3").css("background-color", "blue");
});
});
</script>
</head>
<body>
<p>
This is a main paragraph. Click below to change the background colour.
</p>
<div style="background-color: red;">
<h3> Click Here </h3>
</div>
<h3> Change to Blue colour </h3>
</center>
</body>
</html>Output:
Once click on the “Click Here” text, the output is:
Example #4
Method with slideToggle( ) method
Next example code where when we click the click button the jQuery delegate( ) method inserts the specified text and when we click ant text of <h2> tag then the slideToggle( ) method executed.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
This is an example for jQuery delegate( ) Method
</title>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code for jQuery delegate() method -->
<script>
$(document).ready(function(){
$("button").click(function(){
$("<h2> This is an example for delegate Method </h2>").insertAfter("button");
});
$("div").delegate("h2", "click", function(){
$(this).slideToggle();
});
});
</script>
</head>
<body>
<h1>Welcome to delegate( ) method.</h1>
<div style="background-color: red">
<h2> Text to slide.</h2>
<h2> The delegate Method. </h2>
<button>Click</button>
</div>
</body>
</html>Output:
Once click on the “Click ” button, the output is:
Further when you click on any text that text get remove or slide toggle, as shown in the below output
Conclusion
- The jQuery delegate( ) method is used for event handlers. It uses to register specified elements and its children for the event handlers. The jQuery delegate( ) method runs an event handler function to handle an event that occurs. The delegate( ) method attached event handlers work not only to current elements but also to the future elements.
- Parameters are:
- ChildSelector: ChildSelector is used to specify elements on which to work the event handler.
- Event: Event specifies the kind of events to attach to the elements. It can have one or more events, each event separator used as space.
- Data: Data is optional. Data used to specify the function’s data parameters.
- Function: Function is optional. The function used to specify the function name which is to be executed if an event occurs.
Recommended Articles
This has been a guide to jQuery delegate(). Here we also discuss their introduction, syntax, parameters. You may also have a look at the following articles to learn more –
