html5 Drag & Drop - unerwünschte JavaScript-Schleife

Question

Ich erstelle eine Zeitplan-Tabelle in HTML und Javascript. Eine unfriedliche Geige ist hier: https://jsfiddle.net/tobyla/6xa225gx/

Der Benutzer ist in der Lage, Arbeiter zu verschiedenen Rollen innerhalb der gleichen 'Day' Spalte zu ziehen. Ein Teil der Anforderung besteht darin, dass der Benutzer abwesende Arbeiter in die Abwesenheitsspalte ziehen kann, wo sie angezeigt werden können. (Es kann mehr als einen für jeden gegebenen Tag geben).

Das Problem ist, dass für jede zusätzliche Arbeitskraft zu der Säule gegeben, die JavaScript mehr und mehr mal Schleifen, die neuen Namen mehrfach hinzugefügt wird.

das Problem scheint sich um diesen Code verwurzelt zu sein:

else if (draggedItem != this && targetThisDay == thisDay && targetShiftPattern == "absentees") { //MH - swap if we're not dragging the item onto itself 
    copy = "<tr>" + $(this).clone(true,true) + "</tr>"; 
    $(this).after($(draggedItem).clone(true,true)); 
    $(draggedItem).replaceWith('<td class="dnd" draggable="true" data-dayoftheweek="monday" data-skillSet="skill2"> </td>'); 
    $(draggedItem).on("drop", handleDrop); 
    alert('absenteeism');     
    runIndex(); 
} 

Jede Hilfe viel appreciated- Danke Jungs sein würde!

Answer 1

Ihr Problem ist, dass runIndex() Wieder wählt die gleichen Elemente und Wieder bindet die gleichen Event-Handler.

Sie müssen diese Ereignisse nur einmal binden.

Updated fiddle.