Javascript 当元素被多次单击时，如何使事件单击事件只触发一次

我有一个链接，用户可以单击该链接删除记录（

class=“delMail”

）。当他们点击这个链接时，一个新的div会显示另外两个链接[Y和N]。单击Y将删除他们的电子邮件，单击N将取消请求

问题是，如果用户在单击“是/否”之前单击delMail链接10次，代码也会尝试删除该电子邮件10次

我已将代码更新为我的工作版本，如下所示：

$(function(){ //delete Message
    $("a.delMail").click(function(e) {
        e.preventDefault();
        //get divs to show and hide
        var $confirmDelDiv = $(this).parents("tr").next().find(".confirmDelete");
        var $replyDiv = $(this).parents("tr").next().next().find(".replyDiv");

            $replyDiv.fadeOut(); //hide reply div
            $confirmDelDiv.fadeIn("slow"); //show confirm message

            //get id
            var $id = $(this).attr("href"); //get id value of email
            var dataString = "id="+$id;

            $("a.delLinkYes").click(function(y){//if user confirms delete, send id to php page
                y.preventDefault(); $(this).unbind("click");
                    $.ajax({
                            type: "POST",
                            url:  "process.php",
                            action: "deleteEmail",
                            data:  dataString,
                            dataType: "JSON",
                            cache: false,
                            success: function(data){
                                if(data == "true"){//if email was successfully deleted
                                    $confirmDelDiv.delay(60).append("Email deleted!");
                                    $confirmDelDiv.fadeOut("slow");
                                }else{$confirmDelDiv.delay(60).append("Error deleting this email. Please try again!"); return false;}
                            }
                    });
                    return false;
                });

            $("a.delLinkNo").click(function(n){//if user cancels request, stop.
                $(this).unbind("click");alert("cancel"); return false; 
                //$confirmDelDiv.fadeOut("slow"); return false;
            });
    });
});

---

这样行吗？我指的是效率方面的问题？

jQuery就是这样工作的。您应该取消绑定并重新绑定click事件处理程序，以阻止用户滥发结果。以下是基本结构：

$(function() {
  var delHandler=function(e) {
    e.preventDefault();

    //Ignore additional clicks until otherwise stated
    $('a.delMail').unbind('click');

    //Do your stuff
    $.ajax({
      //...
      success:function(data) {
        //...
        //Start listening to user clicks again
        $('a.delMail').bind(delHandler);
      }
    });

    $("a.delLinkNo").click(function(n){
      alert("cancel");
      //Start listening to user clicks again
      $('a.delMail').bind(delHandler);                
      return false;
    });
  }
});

我希望代码示例对您有意义。我省略了几个部分，试图使我补充的内容更清楚。基本上，在处理完第二个Y/N框之前，您不必担心用户是否点击了该按钮。

我会考虑使用而不是

jQuery.fn.click（）

。从文档中可以看出，您可以：

将处理程序附加到 元素的事件。处理程序是 每个元素最多执行一次

因此，它应该简单到更换：

$("a.delMail").click(function(e) ...

与：

---

正如Kranu所指出的，这就是点击处理在jQuery中的工作原理——虽然它不是特定于jQuery的，但是触发的JavaScript

onclick

事件

有几种可能的解决办法。当按下该元素的删除按钮时，使用（向下滚动到“使用事件对象”部分）删除单击处理程序。每当用户选择“否”时，您需要重新绑定单击处理程序

---

另一个选项是保持全局查找对象，例如

window.pendingDeletes={}

（由message_id键入），以跟踪何时触发了删除但未确认，并且每当消息有关于删除的挂起的是/否决定时，

单击处理程序
返回false
 Kranu，请看一下我修改过的工作代码，告诉我我的版本是否会对你的版本产生负面影响？？嗯，我想你的代码是反向的。在他们单击“是/否”按钮后，您应该将“删除”按钮绑定回去。你应该在他们单击删除按钮后立即解除其绑定。现在，从您的代码中，单击“是/否”按钮后，您将解除它们的绑定。你可以试试，但我不认为它能解决你的问题。另一种方法是设置一个开/关开关。用户单击“删除”后，按钮将立即关闭。然后，当他们确认/拒绝时，按钮又被“打开”。实现我的版本有效：）唯一的问题是用户仍然可以从delMail链接中发送垃圾邮件。当然，在他们点击其他链接（Y/N）之前，不会采取任何行动，但这种链接垃圾邮件会增加服务器负载吗？即使在他们点击其他链接之前不会发生任何事情？不会，不会增加服务器负载。JQuery是客户端的，所以在最坏的情况下，他们可能会因为鼠标点击过猛而破坏鼠标，但仅此而已；P也许我误解了你的代码或者别的什么。很抱歉告诉你，当它工作的时候，它就不工作了！哈哈，如果他们想的话，他们可以打破他们的老鼠！代码起作用了，我正在继续。谢谢大家！我学到了很多。过去我主要是用PHP编写代码，所以所有的输入肯定都被这个noob吸收了。+1-不知道
one
-尽管Johny需要重新绑定
one
，选择了“no”。是的，代码中似乎有很多事情。我可以提供另一个答案；）哦，我忘了“一”。然而，正如pygorex1所说，它仍然需要反弹。最后，你的方法和我的方法在简单性方面大致相同。
$("a.delMail").one('click', function(e) ...