php - jQuery .click method doesn't work on <a> that was already made by previous method -

html:

<div id="ajax_search_add_button_div">     <a id="ajax_search_add_button" style="cursor: pointer;">add</a> </div>  <div id="ajax_search_added_items">     selected items:     <table>         <tr>             <td>nr.</td>             <td>item name</td>             <td>amount</td>             <td></td>         </tr>     </table> </div> 

javascript 1

$("#ajax_search_add_button").click(function() {     $("#ajax_search_added_items table").append('<tr><td>1</td><td>2</td><td>3</td><td><a id="ajax_search_remove_button" style="cursor: pointer;">remove</a></td></tr>'); }); 

javascript 2

$("#ajax_search_remove_button").click(function() {     $(this).closest("tr").remove(); }); 

why nothing happening when press "remove" button? when click on "add" button, "javascript 1" method starts, when click on "remove" button, "javascript 2" method doesn't start.

use event delegation newly created elements.

$(document).on("click","#ajax_search_remove_button",function() {     $(this).closest("tr").remove(); });