Question

我正在使用隐藏功能，它允许我隐藏页面中的多个元素。

隐藏盒就像：

<div class="box">
  <a href='javascript:setHide("Element_1")' class="button element_hide">Hide Box 1</a>
</div>
<div class="box">
  <a href='javascript:setHide("Element_2")' class="button element_hide">Hide Box 2</a>
</div>

js是：

    $('.element_hide').click(function() {
      $(this).closest('.box').hide(300);
    });
    function setHide(ObjID) {
      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);
    }

现在我要添加一个确认框;如果我点击“隐藏框链接”，我想显示以下消息：“你真的想隐藏这个盒子吗？”。所以我试图将js部分更改为：

    $('.element_hide').click(function() {
      $(this).closest('.box').hide(300);
    });
    function setHide(ObjID) {
        if (confirm("Do you really want to hide the box?")) {
          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);
        }
    }

但不幸的是，它不起作用，因为即使我点击“取消”（在确认框中），该框仍然会消失。

有什么想法吗？非常感谢！

Answer 1

这是因为你有两个独立的事件处理程序用于隐藏和确认，而隐藏的事件处理程序总是运行。第一个事件使用href='javascript:setHide("Element_1")'设置，第二个事件使用jQuery $('.element_hide').click设置。

将所有内容移动到公共处理程序中：

$('.element_hide').click(function() {
  if (confirm("Do you really want to hide the box?")) {
    var xmlhttp

    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    } else {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    var ObjID = $(this).data('hide');
    var p_str = "p=" + ObjID;
    xmlhttp.open("POST", "/hide/", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send(p_str);

    $(this).closest('.box').hide(300);
  }
});

HTML部分将成为：

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

注意，如何使用数据属性（data-hide="Element_1"）将ObjID传递给事件处理程序。

在现有的hide-function中添加jQuery删除确认框

1 个答案: