為什么附加按鈕時重復按鈕？

Question

我的按鈕僅會為找到的每個單詞添加一次，但不知何故，它會添加一次以上。 我不知道什么會導致這種情況發生，因此我發布了更多的代碼，而不僅僅是按鈕和附件。 我認為在追加之前出現了問題？ 在這里，您可以查看圖片： 如您所見，有4個字...但是大約有10個按鈕，而應該是4個。

function createExercise(json) {
const exercises = json.main_object.main_object.exercises;
exercises.forEach(function(exercise) {
var exer = $('<div/>', {
    'class': 'row'
  })
  .append(
    $('<div/>', {
      'class': 'col-md-3'
    })
    .append(
      $('<div/>', {
        'class': 'row'
      })
      .append($('<div>', {
        class: 'col-md-3 testforbutton',
       // text: "(button here)"
      }))
      .append($('<div>', {
        class: 'col-md-9 ExerciseWordFontSize exerciseWord',
        'id': 'eenwoordlol[' + ID123 + ']', // note the brackets will need to be escaped in later DOM queries
        text: exercise.word
      }))
    )
  ).append(
    $('<div>', {
      class: 'col-md-9',
      text: "(4 x col-3 here)"
    })
  );

$("#exerciseField").append(exer);
ID123++;
$('.testforbutton').append(getAudioForWords());
});
}

createExercise(fakejson);


function getAudioForWords() {
    var audioBtn = $('<button/>', {
    'class': 'btn btn-primary fa fa-volume-up sound'
   });
   return audioBtn;
 }

Answer 1

從代碼開始， 練習的每次迭代都將向所有現有的testforbutton元素添加一個按鈕，從而在先前添加的行中復制按鈕。

只是限制你的選擇搜索的testforbutton在當前元素exer元素

exer.find('.testforbutton').append(getAudioForWords());