表单序列化在 Firefox 中不起作用

Question

表单是通过 ajax 动态加载的。加载表单后，我调用我的小表单插件的初始化。
序列化仅在第一次工作，但如果表单具有必填字段错误，则触发第二次提交，但序列化给出空字符串。 此问题仅在 Firefox 中出现。在 Chrome、IE、Safari 中运行正常

我的小表单插件：

App.Forms = (function (parent, $) {

// Default config
var config = {
    form            : '.ajax-form',
    control         : null,
    successCallback : function () {},
    errorCallback   : function () {}

}, _submitForm = function ($form) {

    console.log('--------------- FORM DATA STRING -----------------');
    console.log($form.serialize());
    console.log('--------------------------------------------------');

    $.ajax({
        type    : $form.attr('method'),
        url     : $form.attr('action'),
        data    : $form.serialize(),
        cache   : false,
        success : function (response) {

            if (config.control === null) {
                $form.hide().html(response).fadeIn(800);

            } else {
                $(config.control).hide().html(response).fadeIn(800);
                //                    console.log(response);
            }

            if ($(response).find('.field-validation-error')) {
                App.Placeholder.init();  // Generate placeholder if browser not support
                config.errorCallback.call();
            } else {
                config.successCallback.call();
            }

        }
    });
};

parent.init = function (options) {

    $.extend(config, options);

    var $form = $(config.form);

    if (!$form.length) {
        return false;
    }

    App.Placeholder.init();  // Generate placeholder if browser not support

    $form.on('click', ':submit', function (e) {
        e.preventDefault();
        _submitForm($form);
    });

    return parent;
};

return parent;  }) (App.Forms || {}, jQuery);

表格：

@using N2Project @model N2Project._Essence.Models.RegisterModel  @using (Html.BeginForm("Register", "LoyaltyLogin", FormMethod.Post, new { @id = "register-form" })) {
<p>
    <span class="error">@ViewBag.Error</span>
    <span class="success">@ViewBag.Success</span>
</p>

<p>
    @Html.TextBoxFor(m=>m.Loyaltycard,new{@placeholder="Card Number", @class="size100"})
    @Html.ValidationMessageFor(m=>m.Loyaltycard)
</p>

<p>
    @Html.TextBoxFor(m=>m.FirstName,new{@placeholder="First Name", @class="size100"})
    @Html.ValidationMessageFor(m=>m.FirstName)
</p>

<p>
    @Html.TextBoxFor(m=>m.LastName,new{@placeholder="Last Name", @class="size100"})
    @Html.ValidationMessageFor(m=>m.LastName)
</p>

<p>
    @Html.TextBoxFor(m=>m.DOB,new{@placeholder="Date of birth", @class="size100", @id="dob"})
    @Html.ValidationMessageFor(m=>m.DOB)
</p>

<p>
    @Html.TextBoxFor(m=>m.Email,new{@placeholder="Email", @class="size100"})
    @Html.ValidationMessageFor(m=>m.Email)
</p>

<p>
    @Html.PasswordFor(m=>m.Password,new{@placeholder="Password", @class="size100"})
    @Html.ValidationMessageFor(m=>m.Password)
</p>


<p class="checkbox">
    <input type="checkbox" id="subscribe" name="Subscribe" value="true" />
    <label for="subscribe">
        By registering you agree to recieve news and promotions from Essence via email
    </label>
</p>

<p>
    <button href="#" type="submit" class="btn size100">Send</button>
</p> }

Answer 1

问题已解决： _submitForm($(this).closest('form'));

当我调用 submitForm 私有方法时，我传递了最接近的表单，并且它正在工作。

有人可以解释它为什么起作用吗？为什么我们在第一种情况下不在 Firefox 中工作？