on()
methodIf you try to do something with the elements that are dynamically added to DOM using the jQuery click()
method it will not work, because it bind the click event only to the elements that exist at the time of binding. To bind the click event to all existing and future elements, use the jQuery on()
method. Let's take a look at an example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Bind Click Event to Dynamically added Elements</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("ol").append("<li>list item <a href='javascript:void(0);' class='remove'>×</a></li>");
});
$(document).on("click", "a.remove" , function() {
$(this).parent().remove();
});
});
</script>
</head>
<body>
<button>Add new list item</button>
<p>Click the above button to dynamically add new list items. You can remove it later.</p>
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
</body>
</html>
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
Laravel 8 CRUD operation example using Google Firebase
CRUD operation is a basic part of any we...How to Compress and Optimize Image before Uploading in Laravel 8
Since performance is by and astronomical...How to remove empty values from an array in PHP
Use the PHP array_filter() fun...Laravel Eloquent Queries with Eager Loading
When you make relationship in Laravel el...Image Optimization In Laravel With Spatie
Today, Laravelcode share with you one of...