附加带按钮的表格行时，无法单击按钮

Question

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');
});

尝试在文本框中输入任何内容。然后单击插入按钮。 然后单击第一列上的删除按钮。请注意，即使按钮具有预期的类

，警报也不会触发

我的代码出了什么问题？

Answer 1

您所寻找的是活动授权： 使用此：

 $(document).on('click','.deleteClass',function()
 {
      //DELETE CODE HERE.
 });

Answer 2

你可以改用这个：

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