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

FastAdmin键值组件(fieldlist)动态渲染后按钮失效的有效解决方法

在FastAdmin框架中，动态渲染键值组件(fieldlist)后，新增按钮点击事件失效是常见问题。 FastAdmin文档提供的解决方案有时并不适用，本文提供一个基于事件委托的可靠解决方案。

问题根源在于事件绑定时机。 如果在动态添加HTML元素（例如按钮） 之前 绑定事件，新元素将无法响应事件。Fieldlist组件通常在页面加载后渲染，如果事件绑定过早，新按钮自然无效。

解决方案：使用事件委托(event delegation)。 事件委托将事件监听器绑定到父元素，当事件发生在子元素时，父元素捕获并触发相应函数。 即使动态添加子元素，也能正常响应。

人民网AIGC-X

国内科研机构联合推出的AI生成内容检测工具

下载

以下示例使用jQuery实现事件委托：

首先，将事件监听器绑定到不会被移除的父元素(例如document)上，使用$(document).on('click', '.btn-append', ...)。 当点击.btn-append类按钮时，即使该按钮是动态添加的，事件处理函数也会执行。 代码同时演示了动态添加表格行和删除按钮事件绑定。

<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"><a href="https://www.php.cn/link/8fcd9e5482a62a5fa130468f4cf641ef" class="btn btn-append">Append</a></td>
    </tr>
</table>

$(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="https://www.php.cn/link/8fcd9e5482a62a5fa130468f4cf641ef" 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();
    });
});

通过事件委托，确保动态添加的按钮都能正常响应点击事件，有效解决FastAdmin键值组件动态渲染后按钮失效的问题。 关键在于将事件监听器绑定到不会被动态移除的父元素上。