键值组件(Fieldlist)使用js动态渲染后追加按钮不起作用,点击没有反应,请问如何解决?

作者站长头像
站长
· 阅读数 26

键值组件(Fieldlist)使用js动态渲染后追加按钮不起作用,点击没有反应,请问如何解决!键值组件(Fieldlist)使用js动态渲染后追加按钮不起作用,点击没有反应,请问如何解决?

fastadmin文档的解决办法都尝试过,没有卵用

回复
1个回答
avatar
test
2024-06-20

演示如何绑定点击事件并追加新元素

<!DOCTYPE html>
<html lang="en">
<head>
    <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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<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() {
    console.log('Script loaded');
    $(document).on('click', '.btn-append', function(event) {
        event.preventDefault();
        console.log('Append button clicked');
        // 追加新元素的逻辑
        $('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>

</body>
</html>

answer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容