Open In App

How to handle events in dynamically created elements in jQuery ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

When we want to bind any event to an element, normally we could directly bind to any event of each element using the on() method.

Example 1: This example using jQuery on() method to add paragraph element dynamically.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to handle events in dynamically 
        created elements in jQuery?
    </title>
  
    <script src=
    </script>
  
    <script>
        $(document).ready(function () {
            $("#list li").on("click", function (event) {
                $('#list').append('<li>New Paragraph</li>');
            });
        }); 
    </script>
  
    <style>
        li {
            font-size: 30px;
            width: 400px;
            padding: 20px;
            color: green;
        }
    </style>
</head>
  
<body>
    <!-- Click on this paragraph -->
    <ul id="list">
        <li>Click here to append !!!</li>
    </ul>
</body>
  
</html>


Output:

This works really well, but when we add a new list item and click it, nothing happens. This is because of the event handler attached before which is executed when the document is loaded. At that time only the first list item existed and not the new ones. Hence the .on() method was applied only for the first list item and not the rest.

Example 2: The following example is implemented using on() method.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to handle events in dynamically 
        created elements in jQuery?
    </title>
  
    <script src=
    </script>
  
    <script>
        $(document).ready(function () {
            $("#list").on("click", 
                    "li", function (event) {
                $('#list').append(
                    '<li>New Paragraph</li>');
            });
        }); 
    </script>
      
    <style>
        li {
            font-size: 30px;
            width: 400px;
            padding: 20px;
            color: green;
        }
    </style>
</head>
  
<body>
    <ul id="list">
  
        <!-- Click on this item -->
        <li>Click here to check on()!!!</li>
    </ul>
</body>
  
</html>


Output:

Example 3: The following example is implemented using delegate() function. To bind the event handler to dynamically created elements, we will be using Event Delegation. On clicking the new list items, the same action is performed.

Event delegation is the process that allows us to attach a single event listener, to the parent element and it will fire for all the children elements that exist now or will be added in the future. Both on() and delegate() functions allow us to do event delegation.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to handle events in dynamically
        created elements in jQuery?
    </title>
  
    <script src=
    </script>
  
    <script>
        $(document).ready(function () {
            $("#list").delegate("li", 
                "click", function (event) {
  
                $('#list').append(
                    '<li>New Paragraph</li>');
            });
        }); 
    </script>
  
    <style>
        li {
            font-size: 30px;
            width: 400px;
            padding: 20px;
            color: green;
        }
    </style>
</head>
  
<body>
    <ul id="list">
  
        <!-- Click on this item -->
        <li>Click to check delegate !!!</li>
    </ul>
</body>
  
</html>


Output:



Last Updated : 30 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads