动态生成表格行点击按钮无法获取对应RecId值的问题排查

问题原因 #

你遇到的问题和事件委托的#position-order tbody无关，核心是重复使用ID导致的选择器错误：动态生成的每行都用了id="recid"，但HTML规范要求ID必须唯一，jQuery的$('#recid')只会返回页面中第一个匹配该ID的元素，所以不管点击哪行，都会拿到第一行的recid值。

修复步骤 #

1. 修正HTML结构：把重复的id="recid"改为class="recid"，保留隐藏样式：

<tr class="ordertr table-bordered">
<td class="recid d-none"><?=$row['RecId']?></td>
<td class="ps-lg-3">
<ul>
<li><button class="editingST">&#9998;</button></li>
<li><button class="towork">🛠</button></li>
</ul>
</td>
</tr>

补充：如果#editingST也是每行都存在，同样要改成class，避免重复ID的问题

2. 调整JS逻辑：点击按钮时，基于当前按钮定位到所在行的recid元素，而非全局查找：

$("#position-order tbody").on('click', '.towork', function(){
 $.ajax({
type: "POST",
url: '/towork.php',
data: {recid: $(this).closest('tr').find('.recid').text()}
 });
return false;
});

这里用$(this).closest('tr')找到当前按钮所在的表格行，再通过.find('.recid')定位到该行的recid元素，就能获取到对应行的正确值。

内容的提问来源于stack exchange，提问作者kopetan