动态渲染fieldlist后追加按钮无效
使用Fieldlist组件进行动态渲染后,追加的按钮无法响应点击事件。
解决方案
为了解决此问题,需要在渲染完新元素后,使用事件委托给动态添加的按钮绑定点击事件。
演示代码
// 在文档加载后绑定点击事件
$(document).ready(function() {
// 为追加按钮添加点击事件
$(document).on('click', '.btn-append', function(event) {
event.preventDefault();
console.log('Append button clicked');
// 追加新元素的逻辑
$('table.fieldlist').append('<tr><td colspan="8"><a href="#" 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();
});
});
以上就是动态渲染 Fieldlist 后按钮失效?如何解决?的详细内容,更多请关注知识资源分享宝库其它相关文章!
版权声明
本站内容来源于互联网搬运,
仅限用于小范围内传播学习,请在下载后24小时内删除,
如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!
E-mail:dpw1001@163.com
发表评论