Question

所以我有一个表格（#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();
    });
});

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

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

我在使用和不使用preventDefault()的情况下尝试过，并且他们都尝试拦截表单提交操作。有人还有其他想法吗？

Answer 1

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

处理提交事件时，请致电preventDefault。因此，当您以编程方式（$("#edit_form").submit();）提交时，将再次调用提交事件，并再次阻止它，依此类推。

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

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

完整代码：

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

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

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

1 个答案: