jQuery允许单击但不允许双击

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);
    });
})();​

在这里小提琴 由于禁用按钮不是一个选项，因此这是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);