键值组件(Fieldlist)动态追加按钮点击事件无法响应怎么办？

键值组件(fieldlist)动态追加按钮无响应

键值组件(fieldlist)使用javascript动态渲染后添加的按钮可能不会响应点击事件。这可能是因为事件处理程序未正确绑定到动态添加的元素。

解决方案

要解决此问题，请使用事件委派为动态添加的元素绑定事件处理程序。事件委派的工作原理是在父元素(例如容器表)上侦听事件，然后将事件委派给子元素(例如动态添加的按钮)。

以下示例演示了如何绑定点击事件并追加新元素：

<table class="table table-responsive fieldlist">
  <tr>
    <!-- ... -->
  </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() {
  // 为父元素绑定点击事件处理程序
  $(document).on('click', '.btn-append', function(event) {
    event.preventDefault();

    // 追加新元素
    $('table.fieldlist').append('<tr><!-- ... --></tr>');
  });

  // 为动态添加的元素绑定点击事件处理程序
  $(document).on('click', '.btn-remove', function(event) {
    event.preventDefault();
    $(this).closest('tr').remove();
  });
});
</script>

通过这种方法，即使是动态添加的按钮也能正确响应点击事件。

以上就是键值组件(Fieldlist)动态追加按钮点击事件无法响应怎么办？的详细内容，更多请关注硕下网其它相关文章！