Question

我正在使用jQuery / Ajax脚本，无需重新加载页面即可提交表单。我在页面上有多个表单，它们都有相同的类（并且没有id）。这适用于使用以下方式提交表单：

    $('document').ready(function()
{
    $('.form').ajaxForm( {
        success: function() {
            //$('.form').addClass("clicked");
            //$(this).slideUp('fast');
        }
    });
});

但是一旦我想在提交成功时做某事，似乎没有办法引用提交的表单。使用this运算符是有意义的，但它不起作用。我想做这样的事情：

$(this).slideUp('fast');

对于每个元素，取决于提交的表单。（使用.form作为选择器不起作用，因为它隐藏了所有表单。）

我已经尝试在表单中添加一个类（虽然似乎无法引用正确的元素）然后用来调用slideUp函数。

由于

Answer 1

您正在使用的ajaxForm插件提供了对成功回调中表单的引用：

success: function (responseText, statusText, xhr, $form) {
    $form.slideUp("fast");
}

文档：http://jquery.malsup.com/form/#ajaxForm

如果您没有使用此插件，则必须自己维护该引用。一种流行的方法是通过将其分配给类似this的内容来保留对相应self的引用：

$(".form").on("submit", function () {
    var self = this;
    $.ajax({
        success: function () {
            $(self).slideUp();
        }
    });
});

Answer 2

该插件为您提供了另一种方法 - ajaxSubmit() - 可以按如下方式使用：

$('.form').submit(function() { 
    var $form = $(this);
    $form.ajaxSubmit({
        success: function() {
            $form.addClass("clicked").slideUp('fast');//or whatever
        }
    });     
    return false; //suppress natural form submission
});

slideUp Individual Element

2 个答案: