Home » jQuery » jQuery DOM Manipulation Methods

jQuery on() Method

jQuery | on() Method: Learn about the jQuery on() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 30, 2022

on() Method

Events in jQuery are the actions that the user performs on the web page. It can be anything – related to mouse clicks, keyboard presses, etc. Using jQuery, we can control these events in the order we want and can also attach some custom functions to it if needed. That means, we can use predefined event methods for the actions and also define a function that gets fired when the event method is triggered. Overall, this makes the website more dynamic on the user's end. Let's learn about the on() method here.

The on() method is a built-in jQuery method. This method helps to attach one or more event handlers to the selected element. It also attaches the event handler to the child element of the selected element. Every time the specified event is fired for the selected element, the on() method gets triggered and hence executes the following function for the same.

The on() method gets executed even for the elements that have not been yet created. This means that this method works for present and future created elements too.

This method is a replacement for the deprecated methods in jQuery, like – bind(), live(), etc.

on() Method Syntax

$('selector').on(event, childSelector, data, function);

It takes the following parameters:

The event has to be attached to the selected element. More than one event can also be defined for a single element (with spaces in between them).
childselector is an optional parameter that helps to select the specific child that has been attached to the event handler.
data is also an optional parameter through which any additional data can be defined.
The function allows performing some tasks for the attached event handler.

jQuery on() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Event - On</h2>
    <p>Perform the following actions to implement the <b>.on() method</b> in jQuery. </p>
    <hr>
    <h4 style="color:darkblue">Welcome to Include Help ! - Click</h4>
    <p>This is a jQuery Tutorial for Event Methods. - Double Click</p>
    <h4 style="color:darkblue">Thanks for visiting ! - Click</h4>
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('h4').on('click',function(){
            $(this).html('You Clicked Here');
        });
    
        $('p').on('dblclick',function(){
            $(this).html('You Double Clicked Here');
        });
    });
  </script>
</html>

Output: