javascript - 动态生成的模态链接将在每个新生成的链接上进行初始化

Question

我在动态生成的包含模态链接的列表方面遇到问题。我有一个卡片列表(来自 Materialise css)，其中包含各种锻炼的信息。用户可以选择将锻炼添加到列表中以创建锻炼程序。将锻炼添加到列表后，会生成一个模态链接，其中包含锻炼信息以及教学视频。看来我设置代码的方式是，每次将新的锻炼添加到列表中时，都会触发模式，从而再次触发任何先前存在的链接。因此，如果列表中存在三个锻炼，则附加到该列表的第一个项目已初始化三次。我认为这是一个逻辑错误，但我不确定如何修复它。

如果您需要更多信息或对此进行说明，请告诉我。这是相关代码。

    $(".add-workout").on("click", function(){
    var workoutExerciseIdForList = $(this).prev().attr("id");
    console.log(workoutExerciseIdForList);
    workoutListAppend(workoutExerciseIdForList);
  });

  //Append all necessary elements to workout list

  function workoutListAppend(workoutExerciseIdForList){
    var workoutName = workoutInfo[workoutExerciseIdForList][0].exercise;
    var workoutNameLink = $("<a>").attr("href","#modal-more-info").attr("id","name-"+workoutExerciseIdForList).addClass("modal-trigger").append(workoutName);
    var workoutAppend = $("<td>").append(workoutNameLink);
    var repAppend = $("<td>").append('<div class="input-field"><input class="formReps" id="reps-'+workoutExerciseIdForList+'" type="text" class="validate"><label for="reps-'+workoutExerciseIdForList+'"></label></div>');
    var setAppend = $("<td>").append('<div class="input-field"><input id="sets-'+workoutExerciseIdForList+'" type="text" class="validate"><label for="sets-'+workoutExerciseIdForList+'"></label></div>');
    var weightAppend = $("<td>").append('<div class="input-field"><input id="weight-'+workoutExerciseIdForList+'" type="text" class="validate"><label for="weight-'+workoutExerciseIdForList+'"></label></div>');
    var completeButtonAppend = $("<td>").append('<input type="checkbox" class="workoutCheckbox" id='+workoutExerciseIdForList+'-checkbox /><label for='+workoutExerciseIdForList+'-checkbox></label>');
    var removeWorkoutButton = $("<td>").append('<a class="waves-effect waves-light red btn">X</a>');
    var workoutAppendToTr = $("<tr>").append(workoutAppend)
                                     .append(repAppend)
                                     .append(setAppend)
                                     .append(weightAppend)
                                     .append(completeButtonAppend)
                                     .append(removeWorkoutButton);
    $("#workout-append").append(workoutAppendToTr);

    $('.modal-trigger').leanModal({
      dismissible: true, // Modal can be dismissed by clicking outside of the modal
      complete: function() { modalReset(); } // Callback for Modal close
    });

    enterToSubmitReps(workoutExerciseIdForList, workoutName);
    enterToSubmitSets(workoutExerciseIdForList, workoutName);
    enterToSubmitWeight(workoutExerciseIdForList, workoutName);
    fieldIsEmpty(workoutExerciseIdForList, workoutName);
    modalGetId(workoutExerciseIdForList);
    removeWorkoutHandler();
  };

当单击带有 add-workout 类的按钮时，它会从 HTML 元素获取锻炼的 ID，然后从我创建的 javascript 对象中检索数据，然后运行函数workoutListAppend。

感谢您的帮助

Answer 1

所以我假设您的问题是或源于此 block ......

$('.modal-trigger').leanModal({
  dismissible: true, // Modal can be dismissed by clicking outside of the modal
  complete: function() { modalReset(); } // Callback for Modal close
});

您在页面上找到所有模态触发器并对它们应用leanModal。这意味着您还要对所有先前存在的事件以及可能的双重/三重绑定(bind)事件执行此操作。您只需对新创建的元素执行此操作。

workoutAppendToTr.find('.modal-trigger').leanModal({ ...

上面的内容查找具有 modal-trigger 类的元素，但仅限于锻炼AppendToTr 内，这是您的新元素。所以它只对新事物进行绑定(bind)，而不是再次触发所有模态。