php - when the new element is created by Javascript, the tag wont work -

for rough example, have table

<table> <tr>     <td>wangel</td>     <td>tamang</td>     <td><a class="edit">edit</a></td> </tr> </table> 

when click edit, use function using j query, use ajax , call function, edit query php , return new row has been edited

<tr>    < td >wangelpakhrin    </ td>    <td>tamang</td>    <td><a class="edit">edit</td> </tr> 

then, replace older 1 using replace with() . now, problem new edit wont trigger function created earlier in script , else refreshes page. did using live() or on() still refreshes page. can solution towards it? helpful thanks.

the script code

$("a.edit").on("click",function(e) {         e.preventdefault();         var id = $(this).attr("value");         var parent = $(this).parent();         $.post("../lib/ajax/edit-user.php",{id:id},function(data){              parent.parent().replacewith(data);               });   }); 

i assume table fixed , add tr inside table.then make class table tag like

<table class="my_table"> <tr>     <td>wangel</td>     <td>tamang</td>     <td><a class="edit">edit</a></td> </tr> </table> 

now .on function like

$(".my_table").on('click',".edit",function(){      //your work }); 

please let me know status.