jQuery的提交（）是不是叫

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