Question

我有一个用户点击以删除记录的链接（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;
            });
    });
});

这可以吗？我的意思是效率明智吗？

Answer 1

我会考虑使用jQuery.fn.one()而不是jQuery.fn.click()。从文档中可以看出：

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

所以它应该像替换一样简单：

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

使用：

$("a.delMail").one('click', function(e) ...

Answer 2

这就是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的关注。

Answer 3

正如Kranu所说，这就是点击处理在jQuery中的工作方式 - 尽管它不是jQuery特有的，而是触发的JavaScript onclick事件。

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

另一种选择是保留一个全局查找对象，例如window.pendingDeletes = {}（由message_id键控），以跟踪何时触发删除但未确认，并具有click处理程序{{1每当消息有关于删除的待处理是/否决定时。

如何在多次单击元素时仅触发事件单击事件一次

3 个答案: