不调用 jQuery submit()

Question

我尝试在提交行为上覆盖<form>，所以我使用下一个代码：

<script type="text/javascript">
    $(function () {
        var form = $("#FilterForm");

        form.submit(function () {
            alert("Submit");

            $.ajax({
                url: form.attr("action"),
                type: 'POST',
                data: new FormData(this),
                processData: false,
                contentType: false,
                success: function (response) {
                    alert(response);
                    $('#Container').html(response);
                },
                error: function () {
                    $('#Container').html(loadingFailedStr);
                },
                timeout: 15000
            });

            return false;
        })
    });
</script>

此脚本块位于我的表单之后。在局部视图中声明的这个表单：

<div class="panel card-0">
    <div class="panel-body">
        @using (Html.BeginForm("TasksGridViewPartial", "Tasks", new { StaffId = staffId, StageId = stageId }, FormMethod.Post, new { id = "FilterForm", enctype = "multipart/form-data" }))
        {
            <fieldset>
                <div class="form-group row">
                    <div class="col-md-2 col-sm-6">
                        @Html.Label(Headers.DateCreate)
                        <div class="datepicker">
                            @Html.TextBoxFor(m => m.CreatedOn1, new { @class = "form-control" })
                        </div>
                        <div class="datepicker">
                            @Html.TextBoxFor(m => m.CreatedOn2, new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-6">
                        @Html.Label(Headers.DateClose)
                        <div class="datepicker">
                            @Html.TextBoxFor(m => m.ClosedOn1, new { @class = "form-control" })
                        </div>
                        <div class="datepicker">
                            @Html.TextBoxFor(m => m.ClosedOn2, new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-6">
                        @Html.Label(Headers.DateStart)
                        <div class="datepicker">
                            @Html.TextBoxFor(m => m.StartDate1, new { @class = "form-control" })
                        </div>
                        <div class="datepicker">
                            @Html.TextBoxFor(m => m.StartDate2, new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-6">
                        @Html.Label(Headers.DateEnd)
                        <div class="datepicker">
                            @Html.TextBoxFor(m => m.EndDate1, new { @class = "form-control" })
                        </div>
                        <div class="datepicker">
                            @Html.TextBoxFor(m => m.EndDate2, new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-6">
                        @Html.Label(Headers.DateCheck)
                        <div class="datepicker">
                            @Html.TextBoxFor(m => m.VerifiedOn1, new { @class = "form-control" })
                        </div>
                        <div class="datepicker">
                            @Html.TextBoxFor(m => m.VerifiedOn2, new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-6">
                        @Html.Label(Headers.TaskNumber)
                        <div style="padding: 4px;">
                            @Html.TextBoxFor(m => m.VerifiedOn1, new { @class = "form-control", type = "number" })
                        </div>
                        <div style="padding: 4px;">
                            @Html.TextBoxFor(m => m.VerifiedOn2, new { @class = "form-control", type = "number" })
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-3 col-sm-6">
                        @Html.LabelFor(m => m.Executors)
                        @Html.ListBoxFor(m => m.Executors, executors, new { @class = "selectpicker form-control", @title = Messages.ChooseExecutors, multiple = "" })
                    </div>
                    <div class="col-md-3 col-sm-6">
                        @Html.LabelFor(m => m.Projects)
                        @Html.ListBoxFor(m => m.Projects, projects, new { @class = "selectpicker form-control", @title = Messages.ChooseProjects, multiple = "" })
                    </div>
                    <div class="col-md-3 col-sm-6">
                        @Html.LabelFor(m => m.Statuses)
                        @Html.ListBoxFor(m => m.Statuses, statuses, new { @class = "selectpicker form-control", @title = Messages.ChooseStatuses, multiple = "" })
                    </div>
                </div>
                <div class="form-group row" style="padding-top: 24px;">
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary">@Actions.Apply</button>
                        <button type="button" class="btn btn-default">@Actions.ClearFilters</button>
                        <button type="button" class="btn btn-default">@Actions.ShowAccepted</button>
                        <button type="button" class="btn btn-default">@Actions.HideAccepted</button>
                    </div>
                </div>
            </fieldset>
        }
    </div>
</div>

我渲染这个局部视图调用@Html.Action("FilterPartial")。
最有趣的是，我在文档就绪事件中检查了form 变量，它被声明为需要。但是submit 仍然没有被调用。
哪里可能有问题？

Answer 1

return false不够，还需要屏蔽默认：

$(function () {
        var form = $("#FilterForm");

        form.submit(function (e) { // Pass the event to the function
            e.preventDefault(); // Stop the form submitting.

            $.ajax({
                url: form.attr("action"),
                type: 'POST',
                data: new FormData(this),
                processData: false,
                contentType: false,
                success: function (response) {
                    alert(response);
                    $('#Container').html(response);
                },
                error: function () {
                    $('#Container').html(loadingFailedStr);
                },
                timeout: 15000
            });

            return false;
        })
    });