The jQuery On .on() attaches one or more event handlers to selected elements. You can use .on() to attach event handlers for both current and dynamically generated elements.
jQuery On Syntax
1
| $(selector).on(event,childSelector,data,function,map) |
| Parameter | Description |
|---|---|
| event | Required. One or more events (separated by space) to attach to the selected elements. |
| childSelector | Optional. Specifies the event handler should only be attached to the specified child elements and not the selector itself. |
| data | Optional. The additional data to pass along to the function |
| function | Required. The function to run when the event occurs |
| map | One or more event to attach to the selected elements, and functions to run when the events occur eg ({event:function, event:function, …}) |
Let us see some examples of jQuery On method.
jQuery On – Attach an event
Attach a click event on a p element.
1
2
3
4
5
| <p id="para1>1. Click Me</p>$("#para1").on("click", function(){ alert("The paragraph is clicked.");}); |
jQuery On – Attach multiple events
The jQuery .on() can attach multiple events on an element.
In the below code I have attached 2 events to the p element.
In the below code I have attached 2 events to the p element.
- 1. click
- 2. mouseleave
So when the element is clicked or mouse leaves this element, you will get alert box displayed.
1
2
3
4
| <p id="para2">2. Attach Multiple events - click and mouseleave</p> $("#para2").on("click mouseleave", function () { alert("The paragraph is clicked or mouseleave occurred");}); |
jQuery On – Attach event on dynamically created (future) element
The jQuery On is very useful to attach events which are created dynamically on the DOM.
In the code below I have a button that will add p inside the div.
1
2
3
4
5
6
7
| <div id="div3"> This is div in blue <button id="button3">Create a new Paragraph</button></div>$("#button3").click(function (e) { $("#div3").append("<p>A new Paragraph</p>");}); |
Now to add the click event to these dynamically added p element, you may think of the below code.
1
2
3
| $("#button3 p").click(function (e) { //code}); |
But you are wrong this will not work.
To add the click event on these dynamic element you have to use the .on() method.
This code is given below:
1
2
3
| $("#div3").on("click", "p", function () { $(this).empty();}); |
You can see I have added the childSelector as the second parameter to the jQuery On method.
jQuery On – Attach Custom Event
With .on() you can also create custom events.
The below code shows a custom event named myCustomEvent, this event is called from the .trigger()method.
I have also passed a Hi parameter to this custom event.
1
2
3
4
5
6
7
8
| <p id="para4">4. Attach Custom Event</p>$("#para4").on("myCustomEvent", function (event, value) { $(this).append(value);});$("#para4").click(function () { $(this).trigger("myCustomEvent", " Hi");}); |
jQuery On – using the ‘map’ parameter
You can use the map parameter on the jQuery .on() method to attach multiple events to the element.
1
2
3
4
5
6
7
8
9
10
11
12
| <p id="para5">5. Attach multiple events with map parameter - click or move mouse over me</p>$("#para5").on({ mouseover: function () { $(this).css("background-color", "red"); }, mouseout: function () { $(this).css("background-color", "orange"); }, click: function () { $(this).css("background-color", "yellow"); }}); |
Using map parameter I have attached 3 events to the paragraph element.
These events are:
- mouseover color changes to red.
- mouseout color changes to orange.
- click color changes to yellow.
jQuery On – using the ‘data’ parameter
With the data parameter I can pass values to the function call.
1
2
3
4
5
| <p id="para6">6. Using 'data' parameter - Click Me</p>$("#para6").on("click", { msg: "You clicked me" }, myHandler)function myHandler(e) { alert(e.data.msg);} |
On clicking the p element you will see alert box with message ‘You clicked me’.
Remove an Event using .off() method
The work of the .off() method is to remove events from an element.
For example – if an element has a .click() event then .off() method will remove the click event.
For example – if an element has a .click() event then .off() method will remove the click event.
Here I have 2 button and a p element. The first button will attach the click event on the p element while other will use the .off() method to remove the click event.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <p id="para7">7. .off() method - Click Me</p><button id="button7">.on()</button><button id="button8">.off()</button>var handler = function (e) { alert("Paragraph is clicked")}$("#button7").click(function () { $("#para7").on("click", handler);});$("#button8").click(function () { $("#para7").off("click", handler);}); |
