jQuery onclick循环中返回所有值及undefined问题排查

当前代码运行时会出现两类异常：点击后返回循环生成的全部id、随机返回undefined，无法精准拿到当前被点击元素对应的id值，原实现代码如下：

<?php
$datas = get_users_data(); // 从MySQL查询返回数组，包含用户id、用户名等字段
foreach ($datas as $data) {
    $id = $data["id"];
?>
    <td><a href="#" id="edit" data-id="<?php echo $id; ?>" class="edit">Edit</a></td>
<?php } ?>

<script>
$(document).on('click', '.edit', function(event){
    event.preventDefault();
    alert($(this).attr("data-id"));
});
</script>

故障原因 #

• 违反HTML id属性全局唯一的规范：循环生成的所有编辑按钮都使用了相同的id="edit"，会导致DOM选择器匹配逻辑混乱
• 未做属性合法性校验：如果页面中存在其他带有edit类但没有设置data-id属性的元素，点击时就会返回undefined
• 如果实际开发中误将<script>标签放到了foreach循环内部，会重复注册多次点击事件，导致点击一次触发多次弹窗，看起来像是返回了所有id

修复步骤 #

• 移除重复的固定id属性，如果需要保留id，给id拼接用户id保证全局唯一，比如id="edit_<?php echo $id; ?>"
• 使用jQuery专门针对data-*属性的.data()方法读取属性值，稳定性比直接调用.attr()更好
• 增加属性非空校验，避免返回undefined
• 确保<script>标签放在循环外部，避免重复绑定事件

注意：所有DOM元素的id属性必须保证在当前页面全局唯一，重复id是不符合W3C规范的写法，会引发各类DOM操作异常

修复后的完整代码：

<?php
$datas = get_users_data(); // 从MySQL查询返回数组，包含用户id、用户名等字段
foreach ($datas as $data) {
    $id = $data["id"];
?>
    <!-- 移除重复的固定id，如需保留id请拼接唯一标识 -->
    <td><a href="#" data-id="<?php echo $id; ?>" class="edit">Edit</a></td>
<?php } ?>

<script>
// 事件绑定逻辑放在循环外，只注册一次
$(document).on('click', '.edit', function(event){
    event.preventDefault();
    const currentId = $(this).data('id');
    // 校验属性存在再执行后续逻辑
    if (currentId !== undefined) {
        alert(currentId);
        // 后续编辑逻辑写在这里
    }
});
</script>

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