使用jQuery .after()动态添加表格行失效问题求助

先来看你提供的原始失效代码：

var stop_index = 1;
$('.add_stop').click(function(){
  tr = '#stop' + stop_index 
  $(tr).after('<tr id="stop'+ stop_index + '"><td>'+ stop_index +'</td></tr>');
  stop_index ++;
});

这段代码的意图是点击按钮后在表格中添加新行，但无法正常工作。而修改为以下代码后就能正常运行：

$('#stop1').after('<tr id="stop'+ stop_index + '"><td>'+ stop_index +'</td></tr>');

问题出在两个关键的逻辑错误上：

• 目标选择器对应的元素后续不存在：
  第一次点击时，stop_index是1，代码会选中#stop1这个元素（假设它原本就存在于页面中），然后在它后面添加一行id为stop1的新行。之后stop_index递增为2，第二次点击时，代码会尝试选中#stop2，但这个元素根本还没被创建出来——你之前添加的是stop1，所以$('#stop2')是一个空的jQuery对象，调用after()方法自然不会有任何效果。

• HTML id重复的问题：
  第一次点击添加的新行id和原本的#stop1完全重复，这违反了HTML中id必须唯一的规范，哪怕这次能勉强添加成功，后续也会给DOM操作埋下隐患，比如再次选择#stop1时只会匹配第一个元素。

而修改后的代码之所以能正常运行，是因为它固定选择页面中始终存在的#stop1元素来执行after()操作，不管stop_index怎么变化，每次都能找到有效的DOM元素来添加新行，自然就能达到预期效果了。

内容的提问来源于stack exchange，提问作者황준필