javascript - 由javascript在div中添加的动态表单

Question

我有一个由javascript通过其id在div中添加的动态表单，但问题是当我调用这个函数来填充我的div时，第一个调用工作正常，但第二个它添加了已经存在的相同输入。然后在同一个中div 我有重复的输入

getAllPiece();

function getAllPiece(){
    $.getJSON(
         "getAllPiece", 
 {piece: $('select#typeevenement').val()},
 function(data) {
      var html = '';
      for(var i=0; i < data.length; i++){
          html += '<div class="checkbox"><label><input type="checkbox" class="piece" name="piece" value="'+data[i].codePiece+'" id="copiercin"/>' + data[i].libellePiece + '</label></div>';
          console.log(html);
       }
      $('#divpiece').append(html);
     }
  );
}

Answer 1

如果没有别的的话"#divpiece"您可以使用 html() 元素方法 append() ，因为它还会删除您要添加 html 的元素的内容。所以它看起来像:

...
function(data) {
  var html = '';
  for(var i=0; i < data.length; i++){
      html += '<div class="checkbox"><label><input type="checkbox" class="piece" name="piece" value="'+data[i].codePiece+'" id="copiercin"/>' + data[i].libellePiece + '</label></div>';
      console.log(html);
   }
  $("#divpiece").html(html); // HERE IS THE CHANGE
 }
);

如果您需要追加(如果不仅仅是您要添加的元素)，您有两种可能的解决方案:

1. 检查是否 "#divpiece"其内部已经有该元素，就像这样 if($(".piece").val() === data[i].codePiece) { // stop script }

2. 如果您附加的 div ( "<div class="checkbox">...</div> ) 不存在，您可以使用 $("div.checkbox").remove() 删除整个 div然后添加另一个