点击表格内按钮时弹窗无法触发 求可行替代解决方案

问题根因 #

HTML规范要求id属性全局唯一，你在PHP循环遍历表格行的过程中，给每一行的Decline按钮都设置了相同的id="declineB"，导致JS的getElementById方法只能匹配到页面中第一个出现的该id元素，其余行的按钮点击不会触发绑定的事件。

修复方案 #

1. 修改PHP代码，替换唯一id为通用类名 #

把原来固定的id属性改为class属性，还可以按需添加data-*自定义属性存储当前行的关联数据，方便后续弹窗逻辑使用（比如获取当前操作的用户ID）：

<!-- 只需要修改Decline按钮所在的td部分即可 -->
<td>
    <a href="#" class="declineB" data-user-id="<?php echo $row["id"]; ?>">
        <button class="btn btn-danger" style="width: 100%">Decline</button>
    </a>
</td>

2. 修改JS逻辑，使用事件委托绑定点击事件 #

推荐用事件委托的方式绑定事件，就算后续表格行是动态加载新增的也能自动生效，不需要重新绑定：

// 弹窗显示逻辑：委托到document或者上层固定存在的tbody元素上
document.addEventListener("click", function(e) {
    // 判断点击的元素或者父元素是declineB按钮
    if (e.target.closest('.declineB')) {
        // 如果需要获取当前行的用户ID，可以通过 e.target.closest('.declineB').dataset.userId 获取
        document.querySelector(".popup3").style.display = "flex";
        // 阻止a标签默认跳转行为
        e.preventDefault();
    }
})

// 关闭弹窗的逻辑保持不变即可，关闭按钮是唯一的不需要修改
document.getElementById("closeDecB").addEventListener("click", function(){
    document.querySelector(".popup3").style.display = "none";
})

可选的其他实现方案 #

如果不想用事件委托，也可以直接遍历所有declineB类的元素逐个绑定事件，效果一致：

document.querySelectorAll('.declineB').forEach(btn => {
    btn.addEventListener('click', function(e) {
        document.querySelector(".popup3").style.display = "flex";
        e.preventDefault();
    })
})

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