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