重构HTML将模板行放到单独表格后，复制模板行新增的表格行中，带updateable类的元素无法触发modifyItem()函数，但原表格内的行可正常触发。

原HTML代码： #

<table id='template' class='financial'>
<tr id='template-row'><td class='updateable'></td></tr>...
<!-- ... -->
</table>
<table id='table-for-adding-rows'>
 <tr id='original-row'><td class='updateable'></td></tr>
 <!-- this row was copied from 'template-row' -->
 <tr id='added-row-1'><td class='updateable'></td></tr>
<!-- ... -->
</table>

原JS代码： #

$('.financial .updateable').change(function() {   modifyItem(this);  }); 

问题原因 #

1. 直接事件绑定的局限性：你使用的$('.financial .updateable').change(...)是直接绑定事件，只会给页面初始加载时已存在的匹配元素添加监听器。动态新增的元素在绑定事件时还未创建，自然没有被绑定。
2. 选择器范围问题：模板表格#template带有financial类，但新增行被放入的#table-for-adding-rows表格没有这个类，就算重新执行绑定代码，.financial .updateable也无法选中新增行里的元素。

解决方案 #

方案1：事件委托（推荐） #

利用事件冒泡机制，把事件绑定到页面初始就存在的父元素上，这样动态新增的元素触发事件时，事件会冒泡到父元素，由父元素统一处理。

如果只需要处理#table-for-adding-rows里的元素：

$('#table-for-adding-rows').on('change', '.updateable', function() {
  modifyItem(this);
});

如果需要同时处理原模板表格和新增表格里的元素，可绑定到更上层的静态父元素：

$('body').on('change', '.updateable', function() {
  modifyItem(this);
});

方案2：动态绑定事件 #

每次新增行后，手动给新添加的updateable元素绑定事件：

// 示例新增行函数
function addNewRow() {
  // 克隆模板行
  const newRow = $('#template-row').clone();
  // 重设唯一ID，避免ID重复
  newRow.attr('id', 'added-row-' + Date.now());
  // 添加到目标表格
  $('#table-for-adding-rows').append(newRow);
  // 给新行内的updateable元素绑定事件
  newRow.find('.updateable').change(function() {
    modifyItem(this);
  });
}

内容的提问来源于stack exchange，提问作者Mark Leighton Fisher