Apply jQuery Datepicker to dynamically added fields

I made a form with a "date" field and used jQuery Datepicker to insert the date. I also made a function to add more fields equal to those already existing in form:

insert the description of the image here

Code that inserts new fields: 

$('#add_field').click (function(e) {
            //e.preventDefault();     //prevenir novos clicks
            if (x < campos_max) {
                $('#listas').append('\
                    <div class="row">\
                        <div class="form-group col-md-4">\
                            <select name="laboratory_test_id[]" id="laboratory_test_id" class="form-control" required>\
                                <option value="">Selecione</option>\
                                @if(count($tests) > 0)\
                                    @foreach($tests as $item)\
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>\
                                    @endforeach\
                                @endif\
                            </select>\
                        </div>\
                        <div class="form-group col-md-2">\
                            <input type="text" name="result[]" class="form-control" placeholder="Resultado" required>\
                        </div>\
                        <div class="form-group col-md-2">\
                            <input type="text" name="date[]" class="form-control date" placeholder="00/00/0000" required>\
                        </div>\
                        <a style="float: left" href="#" class="remover_campo btn btn-danger">Remover</a>\
                    </div>');
                x++;
            }
        });

Does anyone have any idea why Datepicker doesn't work on the added fields?

Author: Sam, 2019-05-20
Source

1 answers

After .append restart the component with: 

$(".date").datepicker();

Will then apply the plugin to the new fields that have been added.

See: 

$(function(){

   $(".date").datepicker();

   var x = 1;
   var campos_max = 5;
   $('#add_field').click (function(e) {
      //e.preventDefault();     //prevenir novos clicks
      if (x < campos_max) {
          $('#listas').append('\
              <div class="row">\
                  <div class="form-group col-md-4">\
                      <select name="laboratory_test_id[]" id="laboratory_test_id" class="form-control" required>\
                          <option value="">Selecione</option>\
                      </select>\
                  </div>\
                  <div class="form-group col-md-2">\
                      <input type="text" name="result[]" class="form-control" placeholder="Resultado" required>\
                  </div>\
                  <div class="form-group col-md-2">\
                      <input type="text" name="date[]" class="form-control date" placeholder="00/00/0000" required>\
                  </div>\
                  <a style="float: left" href="#" class="remover_campo btn btn-danger">Remover</a>\
              </div>');
          x++;
         $(".date").datepicker();
      }
      
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

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

<div id="listas">
  <div class="row">
      <div class="form-group col-md-4">
          <select name="laboratory_test_id[]" id="laboratory_test_id" class="form-control" required>
              <option value="">Selecione</option>
          </select>
      </div>
      <div class="form-group col-md-2">
          <input type="text" name="result[]" class="form-control" placeholder="Resultado" required>
      </div>
      <div class="form-group col-md-2">
          <input type="text" name="date[]" class="form-control date" placeholder="00/00/0000" required>
      </div>
      <a style="float: left" href="#" class="remover_campo btn btn-danger">Remover</a>
  </div>
</div>
<button id="add_field">Adicionar</button>
 2
Author: Sam, 2019-05-20 23:34:52