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;
        })
    });

jQuery submit（）未被调用

1 个答案: