处理jQuery中的连续按钮单击

Question

问题：如何处理jQuery中的连续按钮单击。 例如，我正在将表单提交到服务器，但是与此同时，用户再次单击按钮，则已为此生成了重复请求。 如何在jQuery中有效地处理此问题。

HTML代码：

<a id="submitBtn" href="javascript:void(0);" 
   onclick="login.validateLogin();" 
   class="btn btn-lg btn-success btn-block">Login</a>

jQuery代码：

var login = {   
  validateLogin:function(){
    $("#errormsg").hide();
    login.validate();
    if($('#loginForm').valid() ===  false){
      return;
    }

    $("#submitBtn").prop('onclick',null);

    /* Server request */               
   },
   validate:function(){
     $("#loginForm").validate({
       ignore:"",  
       submitHandler: function(form) { return false; }
     });           
   },
}

Answer 1

禁用<submit>按钮或单击的其他任何按钮，然后提交表单，因此仅对第一次单击进行计数，并阻止最终用户单击它。 这也是一种语义方式，因为仅解除绑定与按钮关联的任何事件，同时仍然允许单击，将以某种方式使用户感到困惑。

$("#loginForm").validate({
    ignore: "",
    submitHandler: function(form) {
        $('#submitBtn').prop('disabled', true); // disable so it won't be clicked 
        return false;
    }
});

Answer 2

不知道为什么在这样的函数中拥有.validate()方法。 .validate()方法应该被调用一次，并且仅用于初始化插件。

您应该使用type="submit"按钮，以便与尝试手动捕获/停用/激活锚元素相比，可以正确地与插件集成并启用/禁用它要容易得多。 （在button元素上使用CSS使其看起来完全像锚元素。）

然后.prop('disabled', 'disabled')在提交正确验证的表单后，立即在submitHandler使用.prop('disabled', 'disabled')禁用按钮。

正如您在演示中所看到的那样，由于插件会自动处理几乎所有内容，因此不需要大多数代码。

 $(document).ready(function() { $("#loginForm").validate({ // <- initialize plugin on form ignore: [], // <- proper way to set ignore to nothing submitHandler: function(form) { $('#submitBtn').prop('disabled', 'disabled'); alert('submitted'); // <- for demo return false; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script> <form id="loginForm"> <button id="submitBtn" class="btn btn-lg btn-success btn-block">Login</button> </form>