如何动态添加字段

Question

我正在尝试动态添加字段有两个领域1.输入文字2.时间但是在尝试动态添加它们时它们无法工作。这是我的代码。

$(document).ready(function() {
  var maxField = 5; //Input fields increment limitation
  var addButton = $('.add_button'); //Add button selector
  var wrapper = $('.field_wrapper'); //Input field wrapper
  var fieldHTML = '<div class="row"><div class="col-sm-5"><div class="form-group"><label for="exampleInputEmail1">EVENTS</label><input type="text" id="firstdayevent" name="firstdayevent[]" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div></div><div class="col-sm-5"><div class="form-group"><label for="exampleInputEmail1">EVENT\'S TIME </label><div class="input-group bootstrap-timepicker timepicker"><input id="timepicker1" name="firsdayeventtime[]" type="text" class="form-control input-small"><span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span></div></div></div>'; //New input field html 
  var x = 1; //Initial field counter is 1

  //Once add button is clicked
  $(addButton).click(function() {
    //Check maximum number of input fields
    if (x < maxField) {
      x++; //Increment field counter
      $(wrapper).append(fieldHTML); //Add field html
    }
  });

  //Once remove button is clicked
  $(wrapper).on('click', '.remove_button', function(e) {
    e.preventDefault();
    $(this).parent('div').remove(); //Remove field html
    x--; //Decrement field counter
  });
});


$('#timepicker1').timepicker({
  showInputs: false
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/bootstrap.timepicker/0.2.6/css/bootstrap-timepicker.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/bootstrap.timepicker/0.2.6/js/bootstrap-timepicker.min.js"></script>
<div class="field_wrapper">
  <div class="row">
    <div class="col-sm-5">
      <div class="form-group">
        <label for="exampleInputEmail1">EVENTS</label>
        <input type="text" id="firstdayevent" name="firstdayevent[]" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
      </div>
    </div>
    <div class="col-sm-5">
      <div class="form-group">
        <label for="exampleInputEmail1">EVENT'S TIME</label>
        <div class="input-group bootstrap-timepicker timepicker">
          <input id="timepicker1" name="firsdayeventtime[]" type="text" class="form-control input-small">
          <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
        </div>
      </div>
    </div>
    <a href="javascript:void(0);" class="add_button" title="Add field"><i class="fas fa-plus-square"></i></a>
  </div>

</div>

我只是试图动态地添加它们两个字段。一个是文本，第二个是时间选择器。他们无法动态添加

Answer 1

var fieldHTML的单引号内有一个未转义的单引号。在同一行代码<div>和<span>标记内也有多个空格。 -> </i > < /span></div > < /div></div >在该行的末尾。我也看不到您的代码中的删除按钮。

<label for="exampleInputEmail1">EVENT'S TIME</label> 

应以反斜杠转义：

<label for="exampleInputEmail1">EVENT\'S TIME</label> 

[SIDE NOTE：此外，FYI FONT AWESOME链接未包含在您的snipit中，我不得不在此处添加文本以查看“提交”按钮，并麻烦代码。

$(document).ready(function() {
  var maxField = 5; //Input fields increment limitation
  var addButton = $('.add_button'); //Add button selector
  var wrapper = $('.field_wrapper'); //Input field wrapper
  var fieldHTML = '<div class="row"><div class="col-sm-5"><div class="form-group"><label for="exampleInputEmail1">EVENTS</label><input type="text" id="firstdayevent" name="firstdayevent[]" class="form-control" id="exampleInputEmail1" placeholder="Enter email"></div></div><div class="col-sm-5"><div class="form-group"><label for="exampleInputEmail1">EVENT\'S TIME</label><div class="input-group bootstrap-timepicker timepicker"><input id="timepicker1" name="firstdayeventtime[]" type="text" class="timepicker1 form-control input-small"><span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span></div></div></div><a href="javascript:void(0);" class="remove_button" title="Remove Field">Remove Me</i></a></div>'; //New input field html 
  var x = 1; //Initial field counter is 1

  //Once add button is clicked
  $(addButton).click(function() {
    //Check maximum number of input fields
    if (x < maxField) {
      x++; //Increment field counter
      $(wrapper).append(fieldHTML); //Add field html
    }
  });

  //Once remove button is clicked
  $(wrapper).on('click', '.remove_button', function(e) {
    e.preventDefault();
    $(this).parent('div').empty(); //Remove field html
    x--; //Decrement field counter
  });
});

$('.timepicker1').each(function(e){
    $(this).timepicker({
      showInputs: false
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/bootstrap.timepicker/0.2.6/css/bootstrap-timepicker.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/bootstrap.timepicker/0.2.6/js/bootstrap-timepicker.min.js"></script>
<div class="field_wrapper">
  <div class="row">
    <div class="col-sm-5">
      <div class="form-group">
        <label for="exampleInputEmail1">EVENTS</label>
        <input type="text" id="firstdayevent" name="firstdayevent[]" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
      </div>
    </div>
    <div class="col-sm-5">
      <div class="form-group">
        <label for="exampleInputEmail1">EVENT'S TIME</label>
        <div class="input-group bootstrap-timepicker timepicker">
          <input id="timepicker1" name="firstdayeventtime[]" type="text" class="timepicker1 form-control input-small">
          <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
        </div>
      </div>
    </div>
    <a href="javascript:void(0);" class="add_button" title="Add field">FA NOT INCLUDED</i></a>
  </div>

</div>