删除动态生成的行

Question

我知道这不是第一个这类主题，但我已经阅读了几乎所有类似的主题，并且提出的解决方案都不起作用。

我有8个手工行的表，还有添加行按钮，这样就可以添加行：

function addNewRow(){   
    var numRows = $('#newTasks tr').length; 
    $('#newTasks').append('<tr id="row'+numRows+'"><td><input type="text" id="title-'+numRows+'" /></td><td><input type="text" id="description-'+numRows+'" /></td><td><input type="button" id="delete-'+numRows+'" class="deleteButton" value="x" /></td></tr>');
}

正如您所看到的，我在每行中都有删除按钮，但在动态生成的行中它不起作用。

$(document).ready(function(){

    [...]

    //Delete button click event
    $('.deleteButton').click(function(){        
        alert($(this));
        deleteRow($(this));
    });
});

即使警报动作也不是由动态生成的按钮触发的，但在手工行的情况下，它可以正常工作。我认为它不会将动态生成的按钮视为已分类的＆＃34; deleteButton＆＃34;但另一方面css呢。

function deleteRow(thisButton){
    thisButton.parent().parent().remove();
}