Question

我原本想要在单击事件中进行提交：

    $("#booking_Form #submit_Booking").bind("click", function(event){.....

然后，我发现（显然）双击导致重复提交。

所以我尝试使用以下方法捕获并抑制它：

    $("#booking_Form #submit_Booking").bind("dblclick", function(event){
          return false;
    });

但单击事件仍然会被触发两次。

我是否认为如果必须双击不提交两次，我必须将单击事件更改为双击事件。

或者是否有一些全局方式可以关闭双击。

Answer 1

您应该使用.one()。这样所有后续点击都无济于事

$("#booking_Form #submit_Booking").one("click", function(event) {
    //do something
});

链接：http://api.jquery.com/one/

编辑：如果你想使用.one()，那么做这样的事情......

JAVASCRIPT：

$(document).ready(function(){
     $("#b1").one("click", function(e){
        ajaxFunction();
     });   

    function ajaxFunction(){
         $("#b1").one("click", function(e){
             ajaxFunction()
         });

        $.ajax({
            type: "POST",
            url: "http://fiddle.jshell.net/", //use actual URL
            success: function(data){
               //do something    
            }
        });           
    }
});

样本： http://jsfiddle.net/BKqm9/13/

Answer 2

只需在点击处理程序中禁用您的输入，这样用户就无法再次单击，您将在单击处理程序中完成逻辑后再次启用它。所以你可以这样做：

$("#booking_Form #submit_Booking").bind("click", function(event){
   $(this).attr('disabled','true');
   ...
   ...
   var btn = $(this);
   $.ajax('someurl.php',{success: function(){
          ...
          ...
          btn.removeAttr('disabled');
    }
   })
}

Answer 3

您可以将其包装在闭包中并使用脏标志变量。（关闭所以标志不是全局的）

(function(){
    var dirtyFlag = false;
    $('#clicker').click(function(){
        if (dirtyFlag) return;
        dirtyFlag = true;
        setTimeout(function(){
            console.log('clean and proceeding');
            dirtyFlag = false;
        }, 500);
    });
})();

小提琴here。由于禁用按钮不是一个选项，因此IMO是最简洁和最简单的解决方案。

Answer 4

如果您想要排队方法，请尝试以下方法:(只是一个模型）

$('<div>').clearQueue('buttonQueue');

$("#booking_Form #submit_Booking").bind("click", function(event) {
    $('<div>').clearQueue('buttonQueue');
    $('<div>').queue('buttonQueue', myFunctionHere());
});

将它放在DocumentReady函数中应该没问题。

Answer 5

这可能会有所帮助：

$("#booking_Form #submit_Booking").bind("click", function(e) {

    // custom handling here
    e.preventDefault();
    e.stopPropagation();
}

试一试。

Answer 6

在执行逻辑之前，您可以在单击后禁用按钮，而在执行代码后，可以启用按钮单击事件。很简单-

$("#saveOrder").attr("disabled", true);

您的逻辑在这里

$("#saveOrder").attr("disabled", false);

jQuery允许单击但不允许双击

6 个答案: