键值组件动态追加按钮失效如何解决？

键值组件动态追加按钮失效解决方法

使用键值组件（Fieldlist）动态渲染的表格中，追加按钮点击后不响应，如何解决？

解决方法：

文档中提供的解决方案可能无效，因为该组件需要绑定事件并追加新元素才能正常工作。

以下是一个演示如何绑定并追加新元素的代码示例：

<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">
            <a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> Append</a>
        </td>
    </tr>
</table>

<script>
$(document).ready(function() {
    $(document).on('click', '.btn-append', function(event) {
        event.preventDefault();
        $('table.fieldlist').append('<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="javascript:;" class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i> Remove</a></td></tr>');
    });

    $(document).on('click', '.btn-remove', function(event) {
        event.preventDefault();
        $(this).closest('tr').remove();
    });
});
</script>

登录后复制

以上就是键值组件动态追加按钮失效如何解决？的详细内容，更多请关注米云其它相关文章！