Cannot Click button when table row with button is appended

https://jsfiddle.net/r7a2r9eL/

$('#insertBtn').click( function(){
    $('#mytable > tbody:last-child').append('<tr><td>'+$('#fnameText').val()+'</td><td>'+$('#lnameText').val()+'</td><td>'+$('#pointText').val()+'</td><td><button type="button" class="deleteClass">Delete</button></td></tr>');
    $('#textTable input').val('')
});

$(".deleteClass").on("click",function() {
    alert('row deleted');
});

Try typing anything into the textboxes. Then click on the insert button.
Then click on the delete button on the first column. Notice the alert didn’t trigger even though the button has the intended class

What is wrong with my code?


Source: html

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.