jQuery .each() циклически повторяется один раз на каждом элементе

Question

В моем проекте у меня есть таблица, из которой я хочу удалить определенную строку по кнопке. Каждая строка должна обладать атрибутом name с уникальным индексом для представления строки. Это служит для подключения к серверу с помощью ViewModel MVC4. Для передачи на сервер он должен быть пронумерован последовательно, все имена. Скажем, у него должен быть индекс. Если теперь я удалю строку на стороне клиента, индексы не будут автоматически отключены. Для этого я написал пару функций 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. Проблема заключалась в том, что динамически созданные кнопки получают каждый раз, когда я загружаю новый элемент в таблицу нового события click. Я изменил его, отбросив все события кликов от кнопок и давая им новые события.

Перед в моем АЯКС вызова на успех:

$('#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); 
        }); 

и теперь: "метод öffters под названием"

$('#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); 
        });