jquery - append a button with an action and attributes -

i making table data mysql , display them. user add information , data added , appended using ajax.

the problem each line of table contain delete button. , when appending new line, able append button it.

but button don't actions until refresh page. if take facebook. when new status or photos added, multiple button actions appended with. how append button action.

so in table every delete button should take row id delete it. here scripts:

to append button new line:

var btn = '<button type="button" id="delete">delete</button>';  $("#before_tr").before("<tr><td>"+name+"</td><td>"+address+"</td><td>"+phone+"</td><td>"+btn+"</td></tr>"); 

as creating elements dynamically.

you need use event delegation. have use .on() using delegated-events approach.

delegated events have advantage can process events descendant elements added document @ later time.

general syntax

$(staticparentelement).on('event','selector',callback_function) 

add class, since identifiers in html must unique

var btn = '<button type="button" class="delete">delete</button>'; 

example

$(document).on('click', ".delete", function(){     //code remove row     $(this).closest('tr').remove(); }); 

note: in place of document should use closest static container.