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，以便在提交经过适当验证的表单后立即停用该按钮。

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

＆＃13;

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

＆＃13;

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

＆＃13;

在jQuery中处理连续按钮单击

2 个答案: