Open In App

How to handle events in dynamically created elements in jQuery ?

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:


Article Tags :