为现有jQuery隐藏功能添加确认弹窗的问题排查

你遇到的问题是因为代码里存在两个独立的点击处理逻辑：

• 一个是 jQuery 绑定的 $('.element_hide').click()，它会在点击链接时立刻执行 .hide(300)，直接隐藏盒子；
• 另一个是 a 标签 href 属性里的 setHide() 函数，它负责弹出确认框并发送请求。

这两个逻辑是并行触发的——不管你在确认弹窗里点「确认」还是「取消」，jQuery 的 hide 方法已经先一步执行了，所以盒子必然会消失。

我们可以通过两种方式修复这个问题，推荐第二种更规范的写法：

方案一：整合逻辑到 setHide 函数 #

删掉独立的 jQuery 点击事件，把隐藏盒子的逻辑移到确认弹窗的「确认」分支里，确保只有用户确认后才会同时隐藏盒子和发送请求：

// 移除原来的 $('.element_hide').click(...) 这一行
function setHide(ObjID) {
    if (confirm("Do you really want to hide the box?")) {
        // 先隐藏对应盒子
        document.getElementById(ObjID).closest('.box').style.display = 'none';
        // 或者用 jQuery：$('#' + ObjID).closest('.box').hide(300);
        
        // 再发送请求
        var xmlhttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        var p_str = "p=" + ObjID;
        xmlhttp.open("POST", "/hide/", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send(p_str);
    }
}

方案二：用 jQuery 统一处理（更推荐） #

这种方式会避免混合使用 href 内联脚本和 jQuery 事件绑定，代码更清晰易维护：

第一步：修改 HTML，移除内联脚本 #

把 href 改为 #，用 data-* 属性传递目标元素 ID：

<div class="box"> <a href="#" class="button element_hide" data-target="Element_1">Hide Box 1</a> </div>
<div class="box"> <a href="#" class="button element_hide" data-target="Element_2">Hide Box 2</a> </div>

第二步：修改 JavaScript，统一处理逻辑 #

$('.element_hide').click(function(e) {
    // 阻止 a 标签的默认跳转行为
    e.preventDefault();
    
    var $currentBox = $(this).closest('.box');
    var targetObjID = $(this).data('target');
    
    if (confirm("Do you really want to hide the box?")) {
        // 隐藏盒子
        $currentBox.hide(300);
        
        // 发送请求
        var xmlhttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        var p_str = "p=" + targetObjID;
        xmlhttp.open("POST", "/hide/", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send(p_str);
    }
});

// 可以删掉原来的 setHide 函数，因为不再需要了

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