Teach with us

How to bind events on dynamically created elements using jQuery?

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>
Updated on 14-Feb-2020 12:27:57

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements