Javascript 使用jquery在函数中添加remove按钮

我试图添加删除按钮，但不幸的是，addRow函数中填充的删除按钮不起作用。我不知道我错过了什么

<script type="text/javascript">

    $(document).ready(function() {
        $('.deleteRowButton').click(DeleteRow);
    });
    function DeleteRow(){
        $(this).closest('tr').remove();
    }
    $(function () {
        //$("#addRow").click(function ()
        $(document).on("click", "#addRow", function(){
            $('#container tr:last').after('<tr>\n\
            <td><select name="materialID[]" ><option value="0">Select A Material</option><?php echo str_replace("'", "\\'", $options); ?></select></td>\n\
            <td>Quantity: <input type="text" name="qty[]" /></td>\n\
            <td><select name="SupplierID[]" ><option value="0">Select A Supplier</option><?php echo str_replace("'", "\\'", $options2); ?></select></td>\n\
            <td><button class="deleteRowButton" type="button">Remove</button></td>\n\n\
        </tr>');
        });
    });

</script>

$（文档）.ready（函数（）{
$（'.deleteRowButton'）。单击（DeleteRow）；
});
函数DeleteRow（）{
$（this）.closest（'tr'）.remove（）；
}
$（函数（）{
//$（“#添加行”）。单击（函数（）
$（文档）。在（“单击”，“添加行”，函数（）上）{
$（'#container tr:last'）。之后（'\n\
选择一种材料当您以友好方式添加html时，事件不会出现在“已添加”按钮中，因为事件已附加在文档准备就绪时页面上的按钮中，并且不会附加在新按钮上

请尝试以下方法：

$(document).ready(function() {
    $(document).on('click', '.deleteRowButton', function () {
        $(this).closest('tr').remove();
    }
}

请尝试一下，如果有帮助，请告诉我！
使用jQuery对DeleteRow函数的初始分配是针对当时页面上的所有内容运行的。当您添加新行时，分配没有添加到该特定（新）元素，因为它以前从未存在过

为了使其正常工作，您需要添加一个点击事件，或者重新运行jQuery将该事件添加到.deleteRowButton类中，以便所有新类都有该事件。
删除
更多项目抱歉，无法添加完整代码，您是指在运行该代码的位置”$（'.deleteRowButton'）。单击（DeleteRow）；”，这只会对当时页面上的任何内容执行。任何新元素都需要事件处理程序添加到它们中，或者通过向按钮添加显式的“onclick”，或者再次运行jQuery以确保所有deleteRowButton类都包含事件