javascript - 在 jQuery 效果运行时防止提交

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

您可以在开始动画之前取消绑定(bind)事件处理程序，然后在动画的回调函数中再次绑定(bind)处理程序。

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

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

注意:

当您使用绑定(bind)了事件处理程序的自定义 按钮(div 或链接)时，这是一种防止提交的方法。它不适用于纯 html <input type="submit" /> - 按钮，因为解除绑定(bind)后，标准提交将生效。我更喜欢使用自定义按钮，主要是因为样式(尤其是对于 IE7 等)。

如果您想使用纯 html 提交按钮，您必须禁用该按钮(并禁用通过“输入”提交)或设置一个标志，以防止提交，正如其他用户已经在他们的回答中所述!