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'>×</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>
Published on 20-Dec-2017 12:16:09
