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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

A Computer Professional aspiring to become one of the finest in the field

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.