MVC 5 BeginCollectionItem удалить элемент со страницы

Question

Я пытаюсь удалить элементы из списка, который я создал после This question. Добавленная часть функциональности работает просто отлично.

Когда я указываю событие в событии onclick на частичной странице, я получаю ошибку javascript. «« Имя функции »не определено». Рассматривая это, я думаю, что атрибут onclick не требуется, если jquery работает. Однако даже после обновления его для работы с последней версией JQuery он не обнаруживает событие щелчка или, по крайней мере, не запускается.

Main_View только соответствующие разделы

<table id="pastSchoolContainer"> 
     <tr> 
      <td> 
       <input type="button" id="addPastSchool" name="addPastSchool" value="Add School" /> 
      </td> 
     </tr> 
     @foreach (var school in Model.SchoolsAttended) 
     { 
      Html.RenderPartial("_SchoolRemovablePartial", school, new ViewDataDictionary(ViewData) 
      { 
       TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "SchoolsAttended" } 
      }); 
     } 
    </table> 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#addPastSchool").click(function() { 
       $.ajax({ 
        async: false, 
        url: '/Student/AddPastSchool', 
       }).success(function (partialView) { 
        $("#pastSchoolContainer").append(partialView); 
        return; 
       }); 
      }); 
      return; 
     }); 

     $("#addPastSchool").on("click", ".deleteRow", function() { 
      $(this).parents("#pastSchool:first").remove(); 
      return false; 
     }); 
    </script> 
} 

_SchoolRemovablePartial

@model ScholarSponsor.Models.SchoolModel 
@using ScholarSponsor.Helper 

@using (Html.BeginCollectionItem("pastSchool")) 
{ 
    <tr id="pastSchool"> 
     <td> 
      @Html.EditorForModel() 
      <br /> 
      @*<a href="#" id="deleteRow" class="deleteRow" onclick="deleteFunction()">Delete</a>*@ 
      <input type="button" class="deleteRow" value="Remove School" onclick="remove()" /> 
     </td> 
    </tr> 
} 

Answer 1

Продление ответ Стефана функция удалить должна быть внутри функции, которая выполняется, когда документ будет готов. Кроме того, кнопка не должна иметь атрибут onclick.

Соответствующие разделы кода выглядят следующим образом.

Main_View

<table id="pastSchoolContainer"> 
     <tr> 
      <td> 
       <input type="button" id="addPastSchool" name="addPastSchool" value="Add School" /> 
      </td> 
     </tr> 
     @foreach (var school in Model.SchoolsAttended) 
     { 
      Html.RenderPartial("_SchoolRemovablePartial", school, new ViewDataDictionary(ViewData) 
      { 
       TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "SchoolsAttended" } 
      }); 
     } 
    </table> 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#addPastSchool").click(function() { 
       $.ajax({ 
        async: false, 
        url: '/Student/AddPastSchool', 
       }).success(function (partialView) { 
        $("#pastSchoolContainer").append(partialView); 
        return; 
       }); 
      }); 

      $("#pastSchoolContainer").on("click", ".deleteRow", function() { 
       $(this).closest(".pastSchool").remove(); 
       return; 
      }); 
     }); 
    </script> 
} 

_SchoolRemovablePartial

@model ScholarSponsor.Models.SchoolModel 
@using ScholarSponsor.Helper 

@using (Html.BeginCollectionItem("pastSchool")) 
{ 
    <tr class="pastSchool"> 
     <td> 
      @Html.EditorForModel() 
      <br /> 
      <input type="button" class="deleteRow" value="Remove School" /> 
     </td> 
    </tr> 
}