MVC 5 BeginCollectionItem 从页面中删除项目

Question

我正在尝试从This question 之后创建的列表中删除项目。功能的添加部分工作得很好。

当我在部分页面的 onclick 事件中指定一个事件时，我得到一个 javascript 错误。 “‘函数名称’未定义。”仔细查看我认为如果 jquery 正在工作，则不需要 onclick 属性。然而，即使在更新它以使用最新版本的 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>
}