The delegate () method is used to attach one or more event handlers for specified elements which are the children of selected elements. This method executes a function to run when the event occurs.
The attached event handlers with the delegate () method works for both current and future elements.
Syntax:
$(selector).delegate(childSelector,event,data,function) Parameters of jQuery delegate() event
| Parameters | Description |
|---|---|
| ChildSelector | It is a mandatory parameter that is used to specify one or more child elements to attach the event handler. |
| Event | It is also a mandatory parameter. It specifies one or more events to attach to the elements. If you use multiple events then they must be separated by space. |
| Data | It is optional and specifies additional data to pass along to the function. |
| Function | It is executed when the event occurs. |
Let’s take a jQuery delegate () example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>delegate demo</title>
<style>
p {
background: yellow;
font-weight: bold;
cursor: pointer;
padding: 5px;
}
p.over {
background: #ccc;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>This is a single paragraph. Click me for next.</p>
<script>
$( "body" ).delegate( "p", "click", function() {
$(this ).after( "<p>Click me for another paragraph.</p>" );
});
</script>
</body>
</html>
Leave a Reply