JavaScript -带颜色的动态字段添加了太多字段

Question

我创建了动态添加字段的形式，但我有问题的颜色输入:
标准输入通常是添加的，但第一次点击带有颜色的输入是不添加的，然后点击"添加字段"将添加下一个带颜色的字段到所有输入/。
下面是我的代码:

HTML:

<div class="form-group" id="propositionsFields">
  <label class="col-md-4 control-label">Options</label>
  <div class="row">
    <div class="col-8">
      <input class="form-control propositionField" name="proposition[]" type="text" />
    </div>
    <div class="col-2">
      <input type="text" class="form-control jscolor {onFineChange:'updateColor(this)'}" />
      <input type="hidden" class="color-picker" value="" />
    </div>
    <div class="col-2">
      <button class="add-proposition-field propositionManage">Add field</button>
    </div>
  </div>
</div>

JS:

$(document).ready(function() {
  var addField = $(".add-proposition-field");
  var removeField = $('.remove-proposition-field');
  addField.click(function(e) {
    var rodzic = $('.colorInput');
    e.preventDefault();
    var i = $('.propositionField').size();
    var color = 'FF0000';
    var input = document.createElement("input");
    input.className = "form-control";
    input.setAttribute("value", color);
    input.setAttribute("type", 'text');
    var picker = new jscolor(input);
    var newField = '<div class="row"><div class="col-8"><input autocomplete="off" class="form-control" name="proposition[]" type="text" placeholder="Field No."/></div><div class="col-2 colorInput"></div><div class="col-2"><button class="remove-proposition-field propositionManage">Usuń pole</button></div></div>';
    i++;
    rodzic.append(input);
    $(" #propositionsFields ").append(newField);
  });
  $('body').on('click', '.remove-proposition-field', function() {
    $(this).parent('div').parent('div').remove();
  });
});

演示:https://jsfiddle.net/k95detc8/

Answer 1

这个问题是因为你在它存在之前添加了元素。colorInput内容被添加到所有colorInput类中。我已经删除了您的第一个元素，并添加last参数，仅添加在最后一个元素

    $(document).ready(function() {
      var addField = $(".add-proposition-field");
      var removeField = $('.remove-proposition-field');
      addField.click(function(e) {
        
        e.preventDefault();
        var i = $('.propositionField').size();
        var color = getRandomColor();
        var input = document.createElement("input");
        input.className = "form-control";
        input.setAttribute("value", color);
        input.setAttribute("type", 'text');
        var picker = new jscolor(input);
        var newField = '<div class="row"><div class="col-8"><input autocomplete="off" class="form-control" name="proposition[]" type="text" placeholder="Field No."/></div><div class="col-2 colorInput"></div><div class="col-2"><button class="remove-proposition-field propositionManage">Usuń pole</button></div></div>';
        i++;
        
        $(" #propositionsFields ").append(newField);
        $('.colorInput:last').append(input);
      });
      $('body').on('click', '.remove-proposition-field', function() {
        $(this).parent('div').parent('div').remove();
      });
    });
    function updateColor(jscolor) {
      $('.color-picker').val(jscolor);
      $(this).val(jscolor);
    }
    function getRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

div{
  width:100% !important
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="http://beta.leonardo.pl/afrisoexpert/public/css/fluidable.css" rel="stylesheet"/>
<div class="form-group" id="propositionsFields" >
  <label class="col-md-4 control-label">Options</label>
  <div class="row">
    <div class="col-8">
      <input class="form-control propositionField" name="proposition[]" type="text" />
    </div>
    <div class="col-2">
      <input type="text" class="form-control jscolor {onFineChange:'updateColor(this)'}" />
      <input type="hidden" class="color-picker" value="" />
    </div>
    <!-- /.col-2 -->
    <div class="col-2">
      <button class="add-proposition-field propositionManage">Add field</button>
    </div>
    <!-- /.col-2 -->
  </div>
  <!-- /.row -->
</div>
<!-- /.form-group -->