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

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

<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 created dynamically on the DOM.

In the code below I have a button that will add p 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 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);
});

DEMO DOWNLOAD

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.