jQuery - Difference between .on('click') vs .click()

Learn about the difference in between the .on('click') method and .click() method in jQuery.
Submitted by Pratishtha Saxena, on December 23, 2022

jQuery .on('click') vs .click()

These are the two most used methods in jQuery when any function has to be attached on click of the element. Now, the question arises, which of the two must be used and why. Let's learn about them individually.

jQuery .click()

Whenever the selected element is clicked on the web-page, the click event occurs, which further triggers the click() method. If any function is attached to it, then the function also gets fired along. Using the click() method, we can perform various other tasks related to the element.

Syntax:

$('selector').click();
$('selector').click(function(){});

The click() method accepts an optional parameter – function.

When we use this method for click events, a separate handler gets created for every single element that matches the selector. Hence, it consumes more memory than the on() method.

jQuery .on('click')

The on('click') method helps to attach 'click' event handlers to the selected element. Every time the click event is fired for the selected element, on('click') 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.

Syntax:

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

Usually, the .on() method is preferred more than the .click() method because a single handler is created for all elements that match your selector, including the ones created dynamically. Therefore, it consumes lesser memory than the .click() method and is more useful.

Apart from this, both the method in jQuery work the same and performs the execution smoothly.

The following example shows the application and execution of both methods. Two different functions are attached with .on('click') and .click() methods, which further get fired once the event is triggered.

jQuery code to demonstrate the difference between .on('click') vs .click()

<!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>
    <style>
      #one{
      color:darkgreen;
      font-weight: bolder;
      font-size: larger;
      }
      #two{
      color:blue;
      font-weight: bolder;
      font-size: larger;
      }
    </style>
  </head>
  
  <body>
    <h2>Difference between .on('click') vs .click()</h2>
    <p>Click each of the following to see the results.</p>
    <hr>
    <p id="one">Click ME</p>
    <p  id="two">Click ME</p>
    <hr>
    <h4></h4>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('p#one').click(function(){
            $('p#one').html('This uses .click() method.');
        });
    
        $('p#two').on('click',function(){
            $('p#two').html("This uses .on('click') method.");
        });
    })
  </script>
</html>

Output:

Example: jQuery - Difference between .on('click') vs .click()