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