Javascript jQuery允许单击一次，但不允许双击

我最初希望在单击事件时进行提交：

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

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

所以我试着用以下方法捕捉并抑制它：

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

但单击事件仍然触发了两次

如果双击不能提交两次，我必须将单击事件更改为双击事件，我的想法是否正确

---

或者是否有某种全局方法来关闭双击

只需禁用单击处理程序中的输入，这样用户就不能再次单击，当您完成单击处理程序中的逻辑时，您将再次启用它。因此，您可以执行以下操作：

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

您应该使用

.one（）

。这样，所有后续的单击都不会起任何作用

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

链接：

编辑： 如果你想使用

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

演示：

---

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

$（''）.clearQueue（'buttonQueue'）；
$（“#预订表格#提交预订”）.bind（“单击”，函数（事件）{
$（''）.clearQueue（'buttonQueue'）；
$（''）.queue（'buttonQueue'，myFunctionHere（））；
});

---

将其放入DocumentReady函数应该没问题。

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

小提琴。由于禁用按钮不是一个选项，因此这是最干净、最简单的解决方案。

这可能有助于：

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

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

---

试试看。

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

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

你的逻辑是这样的

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

---

单击后禁用按钮是否可以解决问题？请尝试在事件上添加延迟。这样，您就可以刷新第二个事件，并且只提交一次。我使用KeyUp事件来实现这一点，这样用户可以在运行ajax请求之前键入一些键（2~3）。JQuery自己的文档指出，将事件处理程序绑定到单个和双击事件是不可取的，因为结果是不可预测的。相反，按照Scott的建议禁用按钮应该会起作用。@ScottSimpson，可能会，但在JS事件中可能不会，因为第二次单击可能发生在代码禁用按钮之前。是的，禁用按钮确实会起作用，但它不是输入类型=“提交”按钮。我不确定在第一个按钮被触发后，我是否可以停止第二次单击我的定制按钮？是的，我可以看到，但我没有使用type=“submit”按钮。因为我在函数中使用的是ajax调用，而不是表单的提交函数。这与ajax函数的代码相同，只需重新启用ajax调用成功回调上的按钮。我已经用一个ajax示例更新了我的答案。好吧，我没有意识到disabled可以用这种方式应用。我以前只将此应用于表单提交按钮。因此，这是一个非常好的学习方法，比摆弄dblclick要容易得多。只是我注意到我不能让removeattr工作，而是用removeattr。哦，天哪，我不能接受这两个答案！我喜欢。一种方法。然而，这更为传统，更易于遵循。我之前两个都投了票。好的，看起来不错，我以前从未遇到过。但是，在阅读one文档的注释时，似乎没有一种方法可以在ajax完成后重置one。而整个目标是避免刷新。任何关于如何重置的想法。当然，我已经对我的初始帖子进行了编辑。我希望有帮助！很抱歉没有完全明白这一点。我真的很喜欢使用.one的想法——我称之为伪绑定——但我不知道你在哪里重置了它。它是函数调用自身的位吗？如果是，我很想知道它是如何达到预期效果的。不用担心！好的，我们首先将

.one（）

绑定到

$（“#b1”）

并让它调用

ajaxFunction

。在

ajaxFunction

函数中，我们“重置”绑定。如您所见，在进行ajax调用之前，我再次将

.one（）

绑定到

$（“#b1”）

。这是因为

.one（）

只运行一次。通过再次绑定

.one（）

，我们将创建一个循环，因此按钮单击事件将始终运行一次。好的，这很好。谢谢你花时间解释这一点。

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

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