jQuery/Javascript确认框弹出两次

Question

由于某些奇怪的原因，我的确认框会出现两次。以下是我的代码：

$(".DeleteComment").live("click", function(){

    var CommentID = $(this).attr("rel");
    var confirm

    if (!confirm('Are you sure you want to permanently delete this comment?')){

        return false;

    }else{
        $(this).html("loading").css("color", "#999");
        //AJAX HERE
        return false;
    }


});

- Adam

Answer 1

您是否通过 AJAX 动态加载任何内容？如果是这样，可能是因为点击事件绑定到了相同的元素上两次，导致出现了双重确认。

- Marek Karbarz

Answer 2

当我们绑定事件到通过 AJAX 动态加载的元素时会发生这种情况。例如，当我们点击“编辑”表单按钮时，加载一些动态的 HTML 内容（例如模态框中的动态内容）。在该内容中，如果我们绑定了某个按钮（例如“删除”按钮）的点击事件，则每次单击“编辑”表单按钮时，它都会将“点击”事件绑定到“删除”按钮上。

如果您已经在“删除”按钮的单击事件上设置了确认框，那么它将根据该单击事件的绑定次数询问您的确认意见。这意味着，如果我们单击“编辑”表单按钮 5 次，则它将询问您 5 次确认意见。

因此，为解决这个问题，您可以在每次绑定事件之前取消绑定事件，如下所示：

$(document).off('click', '.DeleteComment').on('click', '.DeleteComment', function () {
   if (confirm('Are you sure you want to permanently delete this comment?')){
      //Delete process
      return true;
   }
   return false;
}

或者，解决这个问题的另一种方法是将您的脚本添加到主页面中，即静态页面而不是动态加载页面。

- Haritsinh Gohil

Answer 3

试试这个：

$_blockDelete = false;

$(".DeleteComment").live("click", function(event){

    event.preventDefault();
    //event.stopPropagation(); // it is not necessary

    if (!$_blockDelete)
    {
      $_blockDelete  =true;
      var rconfirm = confirm('Are you sure you want to permanently delete this comment?');
      if (rconfirm)
      {
          $(this).html("loading").css("color", "#999");
          var CommentID = $(this).attr("rel");
          //AJAX HERE
          //return the value "false" the variable "$_blockDelete" once again ajax response

      }
    }

});

- andres descalzo

---

注意，这将不会阻止同一元素上的其他处理程序运行。因此，如果“click”绑定了两次，则确认对话框仍将显示两次。 - Marek Karbarz

好的，我同意你的观点，在这种情况下没有什么用处。最好是保留这个例子并修改脚本。 - andres descalzo

返回 false 是必要的吗？ - billrichards

@billrichards 是的，因为它需要事件的默认操作不被触发。但最好使用 event.preventDefault(); - andres descalzo

Answer 4

你试过移除那个没用的 var confirm 吗？

- Marcel Jackwerth