jquery - Button not responding/not binding in javascript -

this question has answer here:

• event binding on dynamically created elements? 19 answers

i have 2 functions in javascript shown below:

function add(){      $("#tbl tbody").append(         "<tr>"+         "<td><input type='text'/></td>"+         "<td><input type='text'/></td>"+         "<td><input type='text'/></td>"+         "<td><button class=\"btn btnsave\"><i class=\"icon-ok\"></i></button><button class=\"btn btndelete\"><i class=\"icon-remove\"></i></button></td>"+         "</tr>"      );      $(".btnsave").bind("click", save);           $(".btndelete").bind("click", delete);  }; 

and

function delete(){      var par = $(this).parent().parent();      par.remove();  }; 

and these 2 lines after functions:

$(".btndelete").bind("click", delete); $("#btnadd").bind("click", add); 

the function add() adds new row table id tbl. last column in newly added row has 2 buttons btnsave , btndelete. btndelete supposed delete particular row evident delete() function. (i have not started implement 'save' function yet). but, whenever click 'delete' button, nothing happens. there problem code?

i using bootstrap css ui.

function add() works way.

edit: here screen capture. highlighted button cross not working.

it's may caused duplicate event binding, try code :

function add(){      $("#tbl tbody").append(         "<tr>"+         "<td><input type='text'/></td>"+         "<td><input type='text'/></td>"+         "<td><input type='text'/></td>"+         "<td><button class=\"btn btnsave\"><i class=\"icon-ok\"></i></button><button class=\"btn btndelete\"><i class=\"icon-remove\"></i></button></td>"+         "</tr>"      ); };  // affected new objects $(document).on("click", ".btnsave", save); $(document).on("click", ".btndelete", delete);