Question

在我的项目中，我有一个表，我想通过按钮删除特定的行。每行应具有name属性，该属性具有用于表示行的唯一索引。这用作使用MVC4的ViewModel连接到服务器。要转移到服务器，必须连续编号，所有名称。说它必须有一个索引。如果我现在将在客户端删除一行索引不会自动解除。为此，我现在编写了几个jquery函数来修改索引。但是，我有一个问题，即调用每个具有较高索引的元素作为已删除的元素的方法被多次调用。为什么.each()方法的每个元素都被调用不止一次？是否有可能简化此代码？

以下是jquery方法：

$(function(){
        $('.DeleteButton').click(function () {
            var deletedindex = getIndex(this.name, "DeleteSomething[", "]");
            this.parentNode.parentNode.remove();
            renumberEntry(1, deletedindex);
        });
});
    function renumberEntry(valueToSub, deletedindex) {
        $('#SomethingTableBody > tr > td > .SomethingTableClass').each(function (index, element) {
            element.name = replaceIndexNumber(element.name, "Somethings[", "]", valueToSub, deletedindex);
        });
        $('#SomethingsTableBody > tr > td > .field-validation-valid').each(function (index, element) {
            $(this).attr('data-valmsg-for', replaceIndexNumber($(this).attr('data-valmsg-for'), "Somethings[", "]", valueToSub, deletedindex));
        });
    };
    function replaceIndexNumber(originalText, prefix, suffix, valueToSub, deletedindex) {
        var prefixLength = prefix.length;
        if (originalText.substr(0, prefixLength) == prefix) {
            var index = originalText.indexOf(suffix);
            if (index >= prefixLength) {
                var oldValue = parseInt(originalText.substring(prefixLength, index));
                if (deletedindex < oldValue) {
                    return originalText.substr(0, prefixLength) + (oldValue - valueToSub) + originalText.substr(index);
                }
            }
        }
        return originalText;
    };
    function getIndex(originalText, prefix, suffix) {
        var prefixLength = prefix.length;
        if (originalText.substr(0, prefixLength) == prefix) {
            var index = originalText.indexOf(suffix);
            if (index >= prefixLength) {
                return parseInt(originalText.substring(prefixLength, index));
            }
        }
        return 0;
    };

以下是该观点的一些细节：

                <table id="SomethingsTable">
                    <thead>
                        <tr>
                            <th>@Html.Label("ID")</th>
                            <th>@Html.Label("Type")</th>
                            <th>@Html.Label("Synonym")</th>
                                                 <th></th>
                        </tr>
                    </thead>
                    <tbody id="SomethingsTableBody">
                        @Html.EditorFor(x => x.Somethings)
                    </tbody>
                </table>

这里是编辑器模板：

@{
    Layout = null;
}
@model EditSomethingModel

<tr>
    <td>@Html.TextBoxFor(m=>m.SomethingID, new {@class="SomethingTableClass"</td>
       <td>@Html.DropDownListFor(m => m.SomethingType.ID, new SelectList(ViewBag.SomethingTypeList, "ID", "Name", Model.SomethingType.ID), new { id = "SomethingTypeList" + @Model.ID + "", Name = "Somethings[" + ViewBag.ListId + "].SomethingType.ID", @class = "SomethingTableClass" })<span class="field-validation-valid" data-valmsg-for="Somethings[@ViewBag.ListId].SomethingType.ID" data-valmsg-replace="true"></span></td>
    <td>@Html.DropDownListFor(m => m.MainSomethingSynonymId, new SelectList(ViewBag.SomethingSynonymList, "ID", "Name", Model.MainSomethingSynonymId), new { id = "MainSomethingSynonymList" + @Model.ID + "", @class = "SomethingSynonymList SomethingTableClass", Name = "Somethings[" + ViewBag.ListId + "].MainSomethingSynonymId" })<span class="field-validation-valid" data-valmsg-for="Somethings[@ViewBag.ListId].MainSomethingSynonymId" data-valmsg-replace="true"></span>
           </td>
    <td>
        <input type="button" name="DeleteSomething[@ViewBag.ListId] " value="Delete" class="DeleteButton" id="DeleteSomethingButton_@Model.ID" ></td>
</tr>

Answer 1

解决了问题。我在jquery代码中搜索了错误点的错误。问题是，每当我向表中加载一个新的元素时，动态生成的按钮就会出现。我通过取消绑定按钮中的所有点击事件并为其提供新事件来更改它。

在我的ajax成功电话之前：

$('#SomethingTable tr:last').after(html);
                    var table = $('#NeSomethingForm').removeData("validator").removeData("unobtrusiveValidation");
                    $.validator.unobtrusive.parse(table);
                    $('.DeleteButton').on('click', function () {
                        var deletedindex = getIndex(this.name, "DeleteSomething[", "]");
                        this.parentNode.parentNode.remove();
                        renumberEntry(1, deletedindex);
                    });

现在：

$('#SomethingTable tr:last').after(html);
                    var table = $('#NeSomethingForm').removeData("validator").removeData("unobtrusiveValidation");
                    $.validator.unobtrusive.parse(table);
                    $(".DeleteButton").unbind("click"); // <-- new line to unbind the events before
                    $('.DeleteButton').on('click', function () {
                        var deletedindex = getIndex(this.name, "DeleteSomething[", "]");
                        this.parentNode.parentNode.remove();
                        renumberEntry(1, deletedindex);
                    });

jQuery .each（）在每个元素上循环多次

1 个答案: