在jQuery中处理连续的按钮点击

问题描述：

问题：如何处理jQuery中连续的按钮点击。例如，我将表单提交给服务器，但在此期间用户再次单击按钮，然后重复请求已生成相同。如何在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; } 
    });   
    }, 
}

答

不确定为什么你有这样的函数内的.validate()方法。 .validate()方法应该被调用一次，仅用于初始化插件。

您应该使用type="submit"按钮，以便您可以正确地与插件集成并启用/禁用它比尝试手动捕获/停用/激活锚点元素更容易。（使用CSS的button元素，使它看起来就像你的锚元素。）

然后使用.prop('disabled', 'disabled')的submitHandler内尽快妥善验证表单提交禁用按钮。

正如您在演示中看到的那样，您的大部分代码都不需要，因为插件几乎可以自动处理所有内容。

$(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>

答

禁用<submit>按钮或任何其他按钮，上点击，提交表单，所以只有第一次点击被计数，并且最终用户被阻止点击它。它也是语义作为只是解除与按钮相关的任何事件，同时仍允许点击的方式，将以某种方式混淆用户。

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

在jQuery中处理连续的按钮点击

相关推荐