How to handle events in dynamically created elements in jQuery ? - GeeksforGeeks

30 Jun, 2020
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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
jQuery-Misc
Picked
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
How to set space between the flexbox ?
How to Upload Image into Database and Display it using PHP ?
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?