html5拖放-不需要的javascript循環

Question

我正在用html和javascript創建一個調度表。 無樣式的小提琴在這里： https ://jsfiddle.net/tobyla/6xa225gx/

用戶可以將工作人員拖到同一“天”列中的不同角色。 要求的一部分是用戶可以將缺席的工作人員拖到“缺席”列中，並在其中顯示它們。 （一天中可以有多個）。

問題在於，對於添加到該列的每個其他輔助程序，javascript循環越來越多，多次添加新名稱。

問題似乎源於以下代碼：

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

任何幫助將不勝感激-謝謝大家！

Answer 1

您的問題是runIndex()重新選擇了相同的元素並重新綁定了相同的事件處理程序。

您只需綁定一次這些事件。

更新小提琴 。