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.
$(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, example – ({event:function, event:function, …}) |
Let us see some examples of jQuery On method.
Attach a click event on a p element.
<p id="para1>1. Click Me</p>
$("#para1").on("click", function(){
alert("The paragraph is clicked.");
});
The jQuery .on() can attach multiple events on an element.
In the below code I have attached 2 events to the p element.
So when the element is clicked or mouse leaves this element, you will get alert box displayed.
<p id="para2">2. Attach Multiple events - click and mouseleave</p>
$("#para2").on("click mouseleave", function () {
alert("The paragraph is clicked or mouseleave occurred");
});
The jQuery On is very useful to attach events which are added dynamically in the DOM.
In the code below I have a button that will add a p element inside the div.
<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.
$("#button3 p").click(function (e) {
//code
});
But you are wrong as 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:
$("#div3").on("click", "p", function () {
$(this).empty();
});
You can see I have added the childSelector as the second parameter to the jQuery On method.
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.
<p id="para4">4. Attach Custom Event</p>
$("#para4").on("myCustomEvent", function (event, value) {
$(this).append(value);
});
$("#para4").click(function () {
$(this).trigger("myCustomEvent", " Hi");
});
You can use the map parameter on the jQuery .on() method to attach multiple events to the element.
<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:
With the data parameter I can pass values to the function call.
<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’.
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.
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.
<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);
});
Check the below link: