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，然后HTML元素从我制作的javascript对象中检索数据，然后运行函数workoutListAppend。

感谢您的帮助

Answer 1

所以我假设你的问题是，或者源于这个障碍...

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

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

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

上面找到了带有modal-trigger类的元素，但只能在workoutAppendToTr中找到，这是你的新元素。所以它只对新事物进行绑定，而不是再次对所有模态触发器进行绑定。

动态生成的模态链接正在初始化每个新生成的链接

1 个答案: