Jquery 在提交表单之前运行动画（并确保表单已完成）

所以我有一个小表单（

#edit_form

）包含数据库中的元素。选中的元素被指定为类

。selected

，当用户提交表单时，我希望它们在表单实际提交和页面重新加载之前向上滑动。我试过这个：

$("#edit_form").submit(function(){
    $('.selected').slideUp(800,function(){
        $("#edit_form").submit();
    });
});

$("#edit_form").submit(function(e){
    e.preventDefault();
    $('.selected').slideUp(800,function(){
        $("#edit_form").submit();
    });
});

问题是表单只是提交，并不等待动画完成。我也试过：

$("#edit_form").submit(function(){
    $('.selected').slideUp(800,function(){
        $("#edit_form").submit();
    });
});

$("#edit_form").submit(function(e){
    e.preventDefault();
    $('.selected').slideUp(800,function(){
        $("#edit_form").submit();
    });
});

这会触发动画，但表单永远不会提交。下面是我尝试过的另一个按钮（提交按钮的id为

#formsubmit

）：

---

我在使用和不使用

preventDefault（）

的情况下都试过了，它们的作用都与我试图拦截表单提交操作一样。有人有其他想法吗？

第二个例子很接近，但是javascript进入了一个无限循环。你看到了吗

处理提交事件时，您可以调用

preventDefault

。因此，当您以编程方式提交它（

$（“#编辑表单”）.submit（）；

）时，将再次调用submit事件，您将再次阻止它，依此类推

要解决此问题，请在以编程方式提交表单之前取消绑定submit事件：

$("#edit_form").unbind("submit").submit();

完整代码：

$("#edit_form").submit(function(e)
{
    e.preventDefault();
    $('.selected').slideUp(800,function()
    {
        $("#edit_form").unbind("submit").submit();
    });
});

---

编辑：我错了。固定代码。

您的第二个示例很接近，但是javascript进入无限循环。你看到了吗

处理提交事件时，您可以调用

preventDefault

。因此，当您以编程方式提交它（

$（“#编辑表单”）.submit（）；

）时，将再次调用submit事件，您将再次阻止它，依此类推

要解决此问题，请在以编程方式提交表单之前取消绑定submit事件：

$("#edit_form").unbind("submit").submit();

完整代码：

$("#edit_form").submit(function(e)
{
    e.preventDefault();
    $('.selected').slideUp(800,function()
    {
        $("#edit_form").unbind("submit").submit();
    });
});

---

编辑：我错了。固定代码。

.click（）（函数（e）{

不是有效的Javascript。这是您在问题中提供的代码中的一个打字错误吗？是的，submit（）也是一样（函数（e）…应该是.submit（函数（e）{..}）；|第二个版本应该是workDang，我重新键入了错误。不过我最初键入的代码是正确的，捕捉得很好！

.click（）（函数（e）{

不是有效的Javascript。这是您在问题中提供的代码中的一个打字错误吗？是的，submit（）也是如此。（函数（e）…应该是.submit（函数（e）{..}）；|第二个版本应该是workDang，我重新键入了错误。不过，我最初键入的代码是正确的，很好！你的意思是我应该使用

get（）

在事件处理程序上，还是在提交操作上？尝试了这两种方法，结果与以前基本相同：如果我在事件处理程序上使用它，表单将被提交，动画将永远不会被触发。如果我在提交操作上使用它，动画将被触发，但表单永远不会被提交。@Nick

.get（）

get是jQuery对象的DOM元素。我将编辑答案，使我的意思更加清晰。@Nick，对不起，我的错误。修复了代码，它现在应该可以工作了。嘿，我已经尝试过了，但它仍然不能工作。它仍然只是没有提交表单。我开始怀疑这是否是我代码中的其他地方的问题，但我真的你不这么认为。非常感谢你的帮助！@Nick，它在中工作，所以可能在你的代码中的其他地方。你是说我应该使用

get（）

在事件处理程序上，还是在提交操作上？尝试了这两种方法，结果与以前基本相同：如果我在事件处理程序上使用它，表单将被提交，动画将永远不会被触发。如果我在提交操作上使用它，动画将被触发，但表单永远不会被提交。@Nick

.get（）

get是jQuery对象的DOM元素。我将编辑答案，使我的意思更加清晰。@Nick，对不起，我的错误。修复了代码，它现在应该可以工作了。嘿，我已经尝试过了，但它仍然不能工作。它仍然只是没有提交表单。我开始怀疑这是否是我代码中的其他地方的问题，但我真的你不这么认为。非常感谢你的帮助！@Nick，它在中工作，所以它可能在你的代码中的其他地方。