Question

我遇到这个问题，当用户多次点击按钮（在本例中为提交按钮）时，jQuery将继续播放动画效果，直到完成用户估算的点击次数为止。

这可能会非常压倒性。

jQuery如何判断它当前是否正在对特定元素执行动画，因此我可以阻止用户在元素效果仍在播放时提交？

注意：提交按钮位于文件中。表单处理通过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

您可以在开始动画之前取消绑定事件处理程序，并且在动画的回调函数中，只需再次绑定处理程序。

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

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

注意：

这是一种阻止在使用自定义按钮（div或链接）时提交的方法，该按钮具有绑定到它的事件处理程序。它不适用于纯html <input type="submit" /> - 按钮，因为在解除绑定后，标准提交将生效。我更喜欢使用自定义按钮，主要是因为样式（特别是对于IE7等）。

如果你想使用一个纯粹的html-submit按钮，你必须禁用该按钮（并禁止提交“输入”）或设置一个阻止提交的标志，正如其他用户已经在他们的答案中说明的那样！

Answer 2

在动画结束前禁用提交按钮。

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

Answer 3

var isAnimationRunning;


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

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

创建变量isAnimationRunning让它知道，动画是否运行。如果正在运行，则忽略提交。

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

在演示点击开始动画，然后尝试提交!!

修改1

有些人建议取消绑定点击提交按钮，这不会起作用。如果提交按钮在表单内，单击它将提交表单，你不绑定click事件提交表单，它只是纯HTML，所以取消绑定不会有助于停止提交事件。 check this demo

编辑2 一些人建议在动画期间禁用提交按钮。也不会始终工作，考虑用户在文本框中输入内容并按回车键的情况，无论提交按钮被禁用，都会提交表单（某些浏览器会）。

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

在jQuery效果运行时阻止提交

5 个答案: