Multiple ways of using jQuery On Method – .on() – in your website

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

$(selector).on(event,childSelector,data,function,map)

Let us see some examples of jQuery On method.

jQuery On – Attach an event

Attach a click event on a p element.

<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.

• 1. click
• 2. mouseleave

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");
});

jQuery On – Attach event on dynamically created (future) element

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.

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.

<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.

<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.

<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.

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:

DOWNLOAD