foreach循环生成的表格中Sweetalert弹窗无法触发的问题

问题现状 #

通过PHP foreach循环生成的数据表格，点击删除按钮时直接跳转到delete.php，完全不触发SweetAlert确认弹窗；但在循环外单独测试单个删除按钮时，弹窗功能正常。

核心原因 #

HTML规范要求ID属性必须全局唯一，你现在循环生成的所有删除按钮都用了同一个id="btn-del"，导致jQuery的$('#btn-del')选择器只能匹配到页面中第一个带这个ID的元素，后续所有按钮的点击事件根本没被绑定上。

修复步骤 #

1. 修改PHP循环中的按钮代码

把按钮的唯一ID改成类名，保留href传递删除ID：

<td class="tb-col tb-col-end" style="width: 15%;">
    <!-- 将id="btn-del"替换为class="btn-del" -->
    <a href="delete.php?id=<?= $row['admin_id']; ?>" class="btn btn-soft btn-outline-danger btn-del">删除</a>
</td>

2. 调整JavaScript事件绑定逻辑

改用类选择器绑定点击事件，同时推荐用事件委托的写法（适配后续动态新增的元素，更稳定）：

$(document).ready(function() {
    // 事件委托写法：监听document上的点击，只响应.btn-del的点击
    $(document).on('click', '.btn-del', function (e) {
        e.preventDefault(); // 阻止默认跳转行为
        const deleteUrl = $(this).attr('href');
    
        Swal.fire({
            title: '确定要删除吗？',
            text: "删除后无法恢复此记录！",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#2dc58c',
            cancelButtonColor: '#d33',
            confirmButtonText: '是的，删除！'
        }).then((result) => {
            if (result.isConfirmed) {
                // 用户确认后再跳转删除
                window.location.href = deleteUrl;
            }
        });
    });
});

3. 修正JS文件引入顺序

当前代码中SweetAlert在jQuery之前引入，会导致$未定义的错误，调整顺序为先引入jQuery：

<!-- 先引入jQuery -->
<script src="./assets/js/sweetalert/jquery-3.7.1.min.js"></script>
<!-- 再引入SweetAlert和其他JS -->
<script src="./assets/js/sweetalert/sweetalert2.all.min.js"></script>
<script src="./assets/js/bundle.js"></script>
<script src="./assets/js/scripts.js"></script>
<script src="./assets/js/data-tables/data-tables.js"></script>

验证效果 #

修改完成后，点击表格中任意一条记录的删除按钮，都会先弹出SweetAlert确认弹窗，点击确认后才会跳转到delete.php执行删除操作。

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