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, example – ({event:function, event:function, …})

Let us see some examples of jQuery On method.

Now set the position of vertical scrollbar by using jQuery scrolltop 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");
});
Learning & implementing jQuery Hover Event is now very easy by just reading this short tutorial.

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();
});
The jQuery Val method is used to find out the value of any attribute of an element. Example the value of an input or a select element.

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

Do you know that the jQuery Html method – .html() is used to either find out the html contents of an element.

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

SHARE THIS ARTICLE

  • linkedin
  • reddit
yogihosting

ABOUT THE AUTHOR

I hope you enjoyed reading this tutorial. If it helped you then consider buying a cup of coffee for me. This will help me in writing more such good tutorials for the readers. Thank you. Buy Me A Coffee donate