How to bind events on dynamically created elements using jQuery?

jQuery Web Development Front End Technology

To bind events on dynamically created elements, you need to load dynamically. You can try to run the following code to learn how to bind events on dynamically created elements. Here, we will generate a new list item on button click.

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
      $("ul").append("<li>new item <a href='javascript:void(0);' class='del'>&times;</a></li>");
      });
 
    $(document).on("click", "a.del" , function() {
        $(this).parent().remove();
    });
});
</script>
</head>
<body>
    <button>Add</button>
    <p>Click the above button to dynamically add new list items. You can remove it later.</p>
    <ul>
        <li>item</li>
    </ul>
</body>
</html>

Alex Onsman

Published on 20-Dec-2017 07:46:09

Previous Page Print Page