Click event doesn't work on dynamically generated elements

Learn why does click event doesn't work on dynamically generated elements in the document and what alternative way is there to deal with this issue?
Submitted by Pratishtha Saxena, on December 26, 2022

jQuery and JavaScript are widely known for adding dynamic angles and functionality to the static HTML page with the help of their various methods and functions. Hence, if it is not able to perform this task for dynamically generated elements, then we need to find some other way for the same.

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(){});

But, the click() method is not preferable sometimes – one, because with each click it creates occupies unique spaces in the memory. Two, it is not able to handle dynamically generated elements (elements that are not present at the time but may get generated in the future).

Both of these drawbacks can be overcome using the jQuery on() method.

Using .on() Method

The on() method helps to attach one or more event handlers to 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.

Syntax:

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

It takes the following parameters:

event, that has to be attached to the selected element. More than one events 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.
function allows performing some tasks for the attached event handler.

jQuery code for click event doesn't work on dynamically generated elements

<!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.3.1/jquery.min.js"></script>
    <title>Document</title>
  </head>
  <body>
  
    <h2>Click event doesn't work on dynamically generated elements</h2>
    <p>Click the button to add new elements dynamically.</p>
    <button>Add Items</button>
    <hr>
    <ul>
      <li>January</li>
      <li>February</li>
      <li>March</li>
    </ul>
    <hr>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').on('click', function(){
            $('ul').append('<li>New List Item</li>');
        });
    })  
  </script>
</html>

Output:

Example: Click event doesn't work on dynamically generated elements