jQuery序列化表单时遇到问题

我一辈子都无法弄清楚为什么在通过AJAX发布之前使用jQuery时表单无法序列化。

每当我调试javascript“ formData”时，结果为“”。

我已经尝试过对表单ID进行硬编码，但仍会导致空白序列化，.get(0)在$(this)选择器的末尾进行了尝试，并且在名称中没有下划线的情况下尝试并没有用。

调试时，选择器将输入包含为子级，并且在将输入嵌套在其他元素中而没有问题之前，我对表格进行了序列化。

我动态选择表单$(this)而不使用事件处理程序进行硬编码的原因是，这将是应用程序的一部分，我们将在其中附加其他表单，因此我希望它简洁且可维护。

任何见解都将不胜感激。

我的代码如下：

HTML / PHP视图（使用CodeIgniter）

<div class="tabs-content">
    <section role="tabpanel" aria-hidden="false" class="content active" id="details">
        <div class="login-form">
            <p class="lead">To change basic personal details such as name and email address use this form.</p>
            <form action="<?php echo base_url() ?>ajax/update_details" method="POST" name="updateDetailsForm" id="updateDetailsForm">
                <div class="row">
                    <div class="small-12 columns">
                        <label>First Name
                            <input type="text" placeholder="e.g. John" name="first_name" value="<?php echo $first_name ?>" />
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="small-12 columns">
                        <label>Surname
                            <input type="text" placeholder="e.g. Smith" name="last_name" value="<?php echo $last_name ?>" />
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="small-12 columns">
                        <label>Email
                            <input type="email" placeholder="e.g. [email protected]" name="email" value="<?php echo $email ?>" />
                        </label>
                    </div>
                </div>
                <input type="submit" class="button small" value="Update" />
            </form>
        </div>
    </section>
    <section role="tabpanel" aria-hidden="true" class="content" id="password">
        <div class="login-form">
            <p class="lead">You can use the form below to update your account password.</p>
            <p>Passwords must be between 8 and 50 characters in length.</p>
            <form action="<?php echo base_url() ?>ajax/update_password" method="POST" name="updatePasswordForm" id="updatePasswordForm">
                <div class="row">
                    <div class="small-12 columns">
                        <label>Old Password <small>Required</small>

                            <input type="password" name="oldpw" />
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="small-12 columns">
                        <label>New Password <small>Required</small>

                            <input type="password" name="newpw1" />
                        </label>
                    </div>
                </div>
                <div class="row">
                    <div class="small-12 columns">
                        <label>Confirm New Password <small>Required</small>

                            <input type="password" name="newpw2" />
                        </label>
                    </div>
                </div>
                <input type="submit" class="button small" value="Update Password" />
            </form>
        </div>
    </section>
</div>

Java脚本

$('form').on('submit', (function (e) {
    e.preventDefault();

    var url = $(this).attr('action');
    $(this).html(loadingHTML);

    var formData = $(this).serialize();

    $.ajax({
        type: 'POST',
        url: url,
        data: formData,
        done: function (data) {
            $(this).html(data);
        }
    });
}));