防止在 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();
    });