javascript - CMS 我能够定位要删除的字段，但是当我单击编辑按钮时，它不再定位它

Question

所以，我制作了一个应用程序，您可以在其中创建新的练习(例如作为学生的老师)，每当您为练习添加额外的字段时，当您决定自己做了太多练习时，这一切都很好。对于您的学生来说，您可以单击删除功能，它将删除所需的练习字段。然而，假设您做了一个练习并保存它。 2 个月后，您回来，想要从 10 个练习 1 中删除。因此，您单击所需的删除按钮。但它不会再删除目标练习场。它删除它可以找到的第一个练习字段，而不是其父练习字段。这就是我的删除功能的工作原理:

function getRemoveBtnExercise(target, i){
  var RemoveExerciseBtn = $('<a/>', {
      'class': 'btn btn-danger'
   }).on('click', function(){  
   console.log($('.eblock').prop('id'))
        $('#' + target).remove();
   }).html('<i class="fa fa-close"></i>');

   return RemoveExerciseBtn;
}

eBlock 的外观:

function getExerciseBlock(i, data){
  var eBlock = $('<div/>',{
    'id': i,
    'class': 'col-md-6 eBlock well'
  });

  data = data || {
    word: '',
    syllables: ['','','','']
  };

  $(eBlock).append(
    getRemoveBtnExercise(i),
    getAudioBtn(i),
    getWordInput(i, data.word),
    getWordPartInput(i, data.syllables)
    );

  return eBlock;
}

按钮是如何制作的，以便您可以编辑所需的 JSON 文件:

'<div class="btn-group">\
      <a href="exercise_CMS.php?id=' + full.id + '" class="btn btn-warning"> \
   <i class="fa fa-pencil-square-o"></i> \
 </a> \

总结一下:当您决定进行一个全新的练习时，它确实有效，但是当您单击“编辑”按钮并添加新的eBlock，然后单击删除eBlock 您刚刚追加(因为您改变了添加新 eBlock 的想法)，它突然失去了此功能...

Answer 1

抱歉，我无法添加评论(我需要 50 条评论...)!如果您使用 JS 动态添加元素，那么每次添加新元素时都需要添加监听器。 例如，如果我定义一个事件监听器:

$(".btn-danger").on('click', function(ev){...})

然后使用jquery添加元素:

$("#container").append("<button class="btn btn-danger"> Delete </button>")

单击最后添加的按钮时不会触发 onclick 事件，因此我们需要再次“重写”该事件:

 $(".btn-danger").on('click', function(ev){...})

就您而言，我想您在添加新电子书后需要执行相同的操作。