append - Jquery trigger an event with on() for an appended element -

i have list of products , 1 of them can default one. basic html:

<td>     product 1     <br><span id="defaultproduct1"><a href="#" class="makedefaultproduct">this product default?</a></span> </td> <td>     product 2     <br><span id="currentdefaultproduct2"><strong>default product</strong></span> </td> 

with many non default , 1 default.

when user clicks link make product default, triggers piece of script that

1. does db stuff via ajax
2. turns link <strong>default product</strong>
3. turns previous default link

here's part of script - selectors representing $(the right span there):

$('span[id^="defaultproduct"] a').on("click", function(e) {     e.preventdefault();     //(...)     selectorproduct.empty().append('<strong>default product</strong>').attr('id', 'currentdefaultproduct'+productid);     selectorcurrentdefault.empty().append('<a href="#" class="makedefaultproduct">this product default?</a></span>').attr('id', 'defaultproduct'+currentdefaultproductid); }); 

the issue being click event not triggered when used on appended link, despite tries on(). doing wrong?

thanks!

your current event listener equivalent .click(). have use event delegation:

$('table').on('click', 'span[id^="defaultproduct"] a', function(e) {     ... });