Question

我正在尝试添加删除按钮，但遗憾的是，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>

Answer 1

当你正在添加你的html dinamically时，事件不会出现在添加的按钮中，因为当文档准备好时，事件被附加在页面上的按钮中，并且它不会被激活附在新按钮上。

请改为尝试：

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

尝试一下，让我知道它是否有帮助！

Answer 2

使用jQuery初始分配DeleteRow函数是针对当时页面上的所有内容进行的。添加新行时，分配尚未添加到该特定（新）元素中，因为它从未存在过。

为了使它工作，您需要添加一个on-click事件，或者重新运行jQuery以将事件添加到.deleteRowButton类中，以便所有新的事件都有它。< / p>

使用jquery在函数中添加删除按钮

2 个答案: