我要评论
fastadmin键值组件(fieldlist)动态渲染导致按钮失效问题详解及解决方案
在使用fastadmin的键值组件(fieldlist)时，若通过javascript动态渲染组件内容后，新增按钮无法响应点击事件，通常是由于事件绑定时机错误导致。本文将深入分析此问题并提供有效解决方案，尤其针对fastadmin文档中提供的方案失效的情况。
问题根源在于：动态添加的元素在页面初始加载时并不存在，因此页面初始化时绑定的事件监听器无法捕获这些元素的点击事件。
解决方法：采用事件委托机制。事件委托将事件监听器绑定到父元素，事件冒泡至父元素时，再判断事件目标元素是否符合条件，从而触发相应事件处理函数。
以下示例代码使用jquery实现事件委托，解决fastadmin键值组件(fieldlist)动态渲染后按钮失效的问题：
<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();
});
});登录后复制
这段代码通过 $(document).on('click', ...) 将事件监听器绑定到 document 对象上，确保动态添加的 .btn-append 和 .btn-remove 元素的点击事件都能被正确捕获和处理。 这有效解决了动态渲染后按钮失效的问题。 请注意，代码中使用了更简洁的模板字符串来创建新的行。
通过事件委托，即使是动态添加的元素，也能保证其事件能够被正确处理，从而解决fastadmin键值组件动态渲染后按钮失效的问题。
以上就是fastadmin键值组件动态渲染后按钮失效了，如何解决？的详细内容，更多请关注代码网其它相关文章！
发表评论