Page is refreshing on button click while I'm stoping it using JQuery (event.preventDefault method) - Asp.Net MVC

Question

I have created a table element and appended it to a div element using jquery.

My code is like:

var element="<table id='tbl'><tr><td><input type='text' id='txt'/></td>

<td><input type='button' id='close' value='Remove'/></td>
            </tr></table>";

$('#div1').append(element);

And on the button click event of close button I've write the code :

$('#close').click(function(e){
e.preventDefault();
$('#tbl').remove();
});

but as I press the remove button page is being refreshing.

Please help me out

Answer 1

You are binding the event, possibly at the time when the element is not in the DOM. You should use following code for dynamically inserted elements:

$('#close').on("click", function(e){ e.preventDefault(); $('#tbl').remove(); });