FastAdmin键值组件动态渲染后按钮失效了，如何解决？

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Append Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<table class="table table-responsive fieldlist">
    <tr>
        <td>ID</td>
        <td>Chinese name</td>
        <td>English name</td>
        <td>Number of pieces</td>
        <td>Volume</td>
        <td>Gross Weight</td>
        <td>Value (USD)</td>
        <td>Operate</td>
    </tr>
    <tr>
        <td colspan="8">
            <button class="btn btn-primary btn-append">Append</button>
        </td>
    </tr>
</table>

$(document).ready(function() {
    $(document).on('click', '.btn-append', function(event) {
        event.preventDefault();
        // 追加新元素的逻辑
        let newRow = `<tr>
                        <td>New ID</td>
                        <td>New Chinese name</td>
                        <td>New English name</td>
                        <td>New Number of pieces</td>
                        <td>New Volume</td>
                        <td>New Gross Weight</td>
                        <td>New Value (USD)</td>
                        <td><a href="https://www.php.cn/link/8fcd9e5482a62a5fa130468f4cf641ef" class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i> Remove</a></td>
                      </tr>`;
        $('table.fieldlist').append(newRow);
    });

    // 为动态添加的删除按钮绑定事件
    $(document).on('click', '.btn-remove', function(event) {
        event.preventDefault();
        $(this).closest('tr').remove();
    });
});