键值组件(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>
通过这种方法，即使是动态添加的按钮也能正确响应点击事件。
