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();
  });
});

演示：API

Answer 1

如果因为您之前添加元素存在问题。并将colorInput内容添加到所有colorInput类中。我已删除您的第一个元素并添加last参数，仅在最后一个元素中添加

＆＃13;

    $(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;
    }

＆＃13;

div{
  width:100% !important
  }

＆＃13;

<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 -->

＆＃13;

JavaScript - 动态字段，颜色添加太多字段

1 个答案: