
键值组件动态渲染后追加按钮失效问题
键值组件(Fieldlist)使用 JavaScript 动态渲染后,追加的按钮可能会失效,点击没有反应。为了解决这个问题,可以按照以下步骤操作:
- 检查添加按钮和元素的顺序:确保在添加按钮之前,已经渲染了目标元素。否则,按钮将找不到相应的元素来绑定事件。
- 使用事件委托:使用事件委托将点击事件绑定到某个静态父元素,而不是动态添加的元素上。这样,即使元素是动态添加的,仍然可以触发事件。
$(document).on('click', '.btn-append', function(event) {
event.preventDefault();
// 追加新元素的逻辑
});- 为动态添加的元素绑定事件:对于动态添加的元素,仍然需要绑定相应的事件。可以在事件委托的基础上,进一步绑定特定元素的事件。
$(document).on('click', '.btn-remove', function(event) {
event.preventDefault();
$(this).closest('tr').remove();
});以上步骤可以有效解决动态渲染后追加按钮失效的问题。具体实现细节请参考以下代码示例:
| ID | Chinese name | English name | Number of pieces | Volume | Gross Weight | Value (USD) | Operate |
| Append | |||||||
$(document).ready(function() {
$(document).on('click', '.btn-append', function(event) {
event.preventDefault();
$('table.fieldlist').append('New ID New Chinese name New English name New Number of pieces New Volume New Gross Weight New Value (USD) Remove ');
});
$(document).on('click', '.btn-remove', function(event) {
event.preventDefault();
$(this).closest('tr').remove();
});
});










