动态渲染 Fieldlist 后按钮失效？如何解决？（如何解决.失效.渲染.按钮.动态.....）

wufei123 2025-01-26 阅读:55 评论:0

动态渲染fieldlist后追加按钮无效使用Fieldlist组件进行动态渲染后，追加的按钮无法响应点击事件。解决方案为了解决此问题，需要在渲染完新元素后，使用事件委托给动态添加的按钮绑定点击事件。演示代码// 在文档加载后绑定点...

动态渲染 Fieldlist 后按钮失效？如何解决？

动态渲染fieldlist后追加按钮无效

使用Fieldlist组件进行动态渲染后，追加的按钮无法响应点击事件。

解决方案

为了解决此问题，需要在渲染完新元素后，使用事件委托给动态添加的按钮绑定点击事件。

演示代码

PHP

// 在文档加载后绑定点击事件
$(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();
  });
});