как динамически добавлять поля

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> 

Должен быть экранирован с обратным слэ sh:

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

СТОРОННОЕ ПРИМЕЧАНИЕ: Кроме того, FYI FONT УДИВИТЕЛЬНАЯ ссылка не входит в ваш фрагмент кода, мне пришлось добавить туда текст, чтобы увидеть кнопку отправки и устранить неполадки с кодом.

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