datepicker does not work in dynamic form with Js

Question

Guys, I built a dynamic form using JS. Inside this form I have several input with the class data, where I call datepicker. But they don’t work, someone can help me with this?

Follow the example below. Note that in non-dynamic input datepicker works.

$('.data').datepicker({
  'autoclose': true
});


function adicionarCampos() {
    var objSelect = document.getElementById("numParcelas");
    var i;
    var linha = "";


    // Cria os input
    for (i = 0; i < objSelect.value; i++) {

      // Monta HTML
      linha += "\
                <input type='text' name='data" + i + "' id='linha" + i + "' class='data' maxlength='10'>\n\
            ";

    }
    document.getElementById("txtParcelas").innerHTML = linha;
  }
  // Chama o evento
window.onload = adicionarCampos;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

Aqui o datepicker funciona
<input type='text' class='data'>

<br><br><br><br>


Gera o formulário
 <input type='text' id='numParcelas' name='numParcelas' OnKeyUp="adicionarCampos()" value="1">
  <br>
Aqui o datepicker não funciona<br>
<span id="txtParcelas"></span>

Answer 1

You need to redo the bind of the new element. Look at the example below:

function FazBind() {
$('.data').datepicker({
  'autoclose': true
});
}

function adicionarCampos() {
    var objSelect = document.getElementById("numParcelas");
    var i;
    var linha = "";


    // Cria os input
    for (i = 0; i < objSelect.value; i++) {

      // Monta HTML
      linha += "\
                <input type='text' name='data" + i + "' id='linha" + i + "' class='data' maxlength='10'>\n\
            ";

    }
    document.getElementById("txtParcelas").innerHTML = linha;
FazBind() 
  }
  // Chama o evento
window.onload = adicionarCampos;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

Aqui o datepicker funciona
<input type='text' class='data'>

<br><br><br><br>


Gera o formulário
 <input type='text' id='numParcelas' name='numParcelas' OnKeyUp="adicionarCampos()" value="1">
  <br>
Aqui o datepicker não funciona<br>
<span id="txtParcelas"></span>

UPDATING:

To better explain, when loading the page it mounts the Binds between the HTML components and the JS functions. When adding some element you need to tell who processes that there are new elements with new ones. I created a function to mount the bind you made of the data classes, and call it every time I add a new field.

Answer 2

This is a feature of Javascript, I explained this in another question., in an extremely similar case.

For it to work, you need to call the $('.data').datepicker() after the actual element exists. The $('.data') just manipulates what already exists, there is no "say that an hour will exist". Therefore, if you call the $('.data') without there being the class="data", will not have the desired result.

So insert from the $('.data').datepicker() within its function.

function adicionarCampos() {

  $('#txtParcelas').html('');

  for (i = 0; i < $('#numParcelas').val(); i++) {
    $('#txtParcelas').append("<input type='text' name='data" + i + "' id='linha" + i + "' class='data' maxlength='10'>");
  }

  $('.data').datepicker({
    'autoclose': true
  });

}

adicionarCampos();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

Aqui o datepicker funciona
<input type='text' class='data'>

<br><br><br><br>


Gera o formulário
 <input type='text' id='numParcelas' name='numParcelas' OnKeyUp="adicionarCampos()" value="1">
  <br>
Aqui o datepicker não funciona<br>
<span id="txtParcelas"></span>

This will be sufficient for the $('.data') be called after existing, so doing as you wish. D