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()重新选择了相同的元素并重新绑定了相同的事件处理程序。

您只需绑定一次这些事件。

更新小提琴 。