What is the jQuery on() method?
The on() method of jQuery is used to bind or attach one or multiple event handlers to the specified elements. The bind() method is also used to attach events, however, this is outdated from 1.7 version of jQuery.
See on example to bind event
The $.On() method also replaces the live() and delegate() methods from version 1.7 onwards of jQuery. The On jQuery method is the preferred way that brought a lot of consistency to the API.
On for live method example
In the examples of this tutorial, you can see how the $.on method replaced the bind, live, and delegate methods with each method’s brief (if you do not know already).
Syntax of jQuery on method
Following is the syntax of on method:
$(selector).on(event,childSelector,data,event_handler)
Where
- The Selector is parent element like a div, paragraph etc. in $.on method.
- Event = The events to use come here e.g. click event, dblclick, mouseleave, mouseenter etc. If you are using multiple events, it has to be separated by spaces.
- Data = optional parameter to pass data.
- Function = As an event is triggered, this function will execute which is required.
Examples of using on() method
Following are a few examples of using the on method of jQuery.
Using on() as a replacement of bind() for single event
The bind method was used to bind or attach single or multiple events to the elements in jQuery. Now, this is replaced by $.on method.
Following example shows attaching a single event by using the on() method. As you double click the div element, an alert will be shown that binds the dblclick event.
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
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#bindtest").on("dblclick",function(){
alert("The Div is double clicked.");
});
});
</script>
</head>
<body>
<div id="bindtest">Double click to test bind method with on() method!</div>
</body>
</html>
|
See also bind() method
Using on() method as replacement of bind() for multiple events
Following example binds or attaches multiple events (mouseleave and click). As you single click or leave the mouse after bringing in the div area, an alert will be shown.
Note that multiple events are separated by space in on() jQuery 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
46
47
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#ontest").on("mouseleave click",function(){
alert("On method used for click and mouseleave events.");
});
});
</script>
<style>
#ontest{
background-color:#00ffff;
width:400px;
height:50px;
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<div id="ontest">Either single click or take mouse away from div!</div>
</body>
</html>
|
Using $.on() example as replacement of live() method
As such, the live method is also removed from jQuery latest release and replaced by the $.on method. The live method was used to attach one or more events handlers to the specified elements. That applies to the current and future (child elements) as well. This can be done by using jQuery on() method.
Following example shows how to use On method as the replacement of the live() method. As you click on the text “Add new paragraph”, a child paragraph will be created. As you click both, the parent and child paragraphs, an alert will be shown.
No matter how many paragraphs you create, each new paragraph will also show an alert, just like the parent.
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
46
47
48
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$('#ondiv').on('click', onfunction);
$("#addpara").click(function(){
$("<p>The new paragraph, or child element of Div with ID=ondiv</p>").insertAfter("#onp");
});
});
function onfunction() {
alert("parent or child paragraph clicked");
}
</script>
</head>
<body>
<p id="addpara">Add new paragraph</p>
<div id="ondiv">
<p id="onp">Click this with on() method </p>
</div>
<div id="div2">
<p>Paragraph in div 2</p>
</div>
</body>
</html>
|
See also: live() method
Using on() as replacement of delegate() method
Following example shows how the $.On method can be used as a replacement for the delegate method. As such, the delegate method is just like the live method of jQuery except the delegate method attaches event handlers to child elements only.
We can use the On() method to attach event handlers to child elements only just like the delegate().
See the following example online that shows as you click “Click here to add new paragraph” div element, it will add new child elements of the parent div. If you click on child paragraph elements it will show an alert which is handled in jQuery On method.
See also 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="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$('#ondiv').on("click","p",onfunction);
$("#addpara").click(function(){
$("<p>The new paragraph, or child element of with ID=onp</p>").insertAfter("#onp");
});
});
function onfunction() {
alert("parent or child paragraph clicked");
}
</script>
</head>
<body>
<p id="addpara">Click here to add new paragraph</p>
<div id="ondiv">
<b>Parent Div: </b>Handlers is not attached in on method to specified parent
<p id="onp"><b>Child Paragraph: </b>Click this with on() method</p>
</div>
</body>
</html>
|
See Also jQuery off() method
Leave A Comment?