在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; } 
    });   
    }, 
}

來源

2014-12-13 Anubhav

不確定爲什麼你有這樣的函數內的.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>

來源

2014-12-13 18:13:30 Sparky

禁用<submit>按鈕或任何其他按鈕，上點擊，提交表單，所以只有第一次點擊被計數，並且最終用戶被阻止點擊它。它也是語義作爲只是解除與按鈕相關的任何事件，同時仍允許點擊的方式，將以某種方式混淆用戶。

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

來源

2014-12-13 04:32:58

在jQuery中處理連續的按鈕點擊

回答

相關問題