jQuery delegate() method
The delegate() method of jQuery is almost same like live() method, except it attaches event handlers to child elements of specified selector. For example if Div is a parent selector specified in delegate method,
event handlers to child paragraphs <p>, current or in future, can be attached by using delegate method along with function to perform desired actions. Unlike live() event handlers will be attached to child element(s) only.
Syntax of delegate method
$(selector).delegate(childSelector,event,data,function)
For example
$(“div”).delegate(“p”,”click”, function_to_execute)
If multiple events need to be attached it has to separate by a space.
$(“div”).delegate(“p”,”click mouseleave”, function_to_execute)
Example of using delegate() method
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#livediv').delegate("p","click", livefunction);
$("#addpara").click(function(){
$("<p>The new paragraph, or child element of with ID=livep</p>").insertAfter("#livep");
});
});
function livefunction() {
alert("parent or child paragraph clicked");
}
</script>
</head>
<body>
<p id="addpara">Click here to add new paragraph</p>
<div id="livediv">
<b>Parent Div: </b>Handlers is not attached in delegate method to specified parent
<p id="livep"><b>Child Paragraph: </b>Click this with delegate() method</p>
</div>
</body>
</html>
|
From 1.7 version of jQuery library the preferred method is on() method.
Leave A Comment?