防止在 jQuery 效果運行時提交

Question

我有這個問題，當用戶多次單擊按鈕（在本例中為提交按鈕）時，jQuery 將繼續播放 animation 效果，直到完成用戶估算的點擊次數。

這可能會讓人不知所措。

jQuery 如何判斷它當前是否正在對特定元素執行 animation，因此我可以阻止用戶在元素效果仍在播放時提交？

注意：提交按鈕在文件中。 表單處理通過 AJAX 中繼，此 jQuery 在 ajax 稱為文件內。

以下是主要文件代碼：

$('#login_form').submit(function(e) {
        $.post(
               "ajax.php",
               { user: $('[name="username"]').val(), pw: $('[name="password"]').val() },
               function(resposeText) { $('#login_form_response').html(resposeText); },
               "html"
               );
        e.preventDefault();
    });

這是代碼（在 ajax'ed' 文件中）：

$('#login_form_response').html('Username or Password is inaccurate!')
.slideDown()
.delay(3500)
.slideUp(1500);

Answer 1

您可以在啟動 animation 之前取消綁定事件處理程序，並在 animation 的回調 function 中再次綁定處理程序。

$('#button').unbind('click');

$('#animated_element').animate({ animation, stuff}, 1000, function(){
   $('#button').bind('click', handlerFunc);
});

筆記：

當您使用綁定了事件處理程序的自定義按鈕（div 或鏈接）時，這是一種防止提交的方法。 它不適用於純 html <input type="submit" /> - 按鈕，因為取消綁定后，標准提交將生效。 我更喜歡使用自定義按鈕，主要是因為樣式（尤其是 IE7 等）。

如果您想使用純 html-submit 按鈕，則必須禁用該按鈕（並禁用通過“enter”提交）或設置一個標志，以防止提交，正如其他用戶在他們的答案中已經說明的那樣！

Answer 2

禁用提交按鈕，直到 animation 完成。

$('animatingElementSelector').animate({height: 200px;}, slow, function() { //ENABLE BUTTON HERE });

Answer 3

var isAnimationRunning;


jQuery('#myForm').bind('submit',function(e){

   if(isAnimationRunning)
    {
        e.preventDefault();
    }
});

創建一個變量isAnimationRunning讓它知道，animation 運行與否。 如果運行則忽略提交。

http://jsfiddle.net/praveen_prasad/cfvRf/

在演示上單擊開始 animation 然后嘗試提交！

編輯 1

一些人建議取消綁定單擊提交按鈕，這不起作用。 如果提交按鈕在表單內，單擊它將提交表單，您不會將單擊事件綁定到提交表單，它只是純 html，因此取消綁定不會幫助停止提交事件。 檢查這個演示

編輯 2一些人建議在 animation 期間禁用提交按鈕。 這也不會總是有效，考慮用戶在文本框中輸入內容並按下回車鍵的情況，無論提交按鈕被禁用，表單都將被提交（某些瀏覽器會）。

Answer 4

只需在單擊時添加禁用按鈕:)或隱藏...或兩者兼而有之...隱藏和禁用

Answer 5

嘗試這個：

$('#login_form').submit(function(e) {
        $('input[type=submit]', this).attr('disabled', 'disabled').attr('style','opacity: 0.5; filter: alpha(opacity = 50); ');
        $.post(
               "ajax.php",
               { user: $('[name="username"]').val(), pw: $('[name="password"]').val() },
               function(resposeText) { $('#login_form_response').html(resposeText); },
               "html"
               );
        e.preventDefault();
    });