In the example below, I have created a bind onclick event function. when we will click on the button, element will dynamically added to DOM and it will 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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Bind onclick Event .</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("ol").append("<li>New Element<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 Element</button>
<p>click on button dynamically added a new list Item.If you want to remove element till you can remove it easily.<p>
<ol>
<li>Element one</li>
<li>Element two</li>
<li>Element three</li>
<li>Element four</li>
</ol>
</body>
</html>
0 Comment(s)