javascript - 附加带有按钮的表行时无法单击按钮

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

您正在寻找的是事件委托(delegate): 使用这个:

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