1

Galera, montei um formulário dinâmico usando JS. Dentro desse formulário tenho vários input com a classe data, onde chamo o datepicker. Porém eles não funcionam, alguém pode me ajudar com isso?

Segue o exemplo abaixo. Reparem que no input não dinâmico o datepicker funciona.

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

2 Respostas 2

2

Você precisa refazer o bind do novo elemento. Olha o exemplo abaixo:

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>

ATUALIZANDO:

Para explicar melhor, ao carregar a pagina ele monta os binds entre os componentes HTML e as funções JS. Ao adicionar algum elemento você precisa dizer a quem processa que existem novos elementos com binds novos. Criei uma função para montar o bind que você fez das classes data, e chamo ele toda vez que adiciono um novo campo.

1
  • muito obrigado, funcionou 100% Commented 11/08/2016 às 13:50
0

Isso é uma característica do JavaScript, eu expliquei isto em outra pergunta., num caso extremamente similar.

Para que funcione, você precisa chamar o $('.data').datepicker() após o elemento de fato existir. O $('.data') apenas manipula aquilo que já existe, não há como "dizer que aquilo uma hora irá existir". Logo, se chamar o $('.data') sem que exista o class="data", não terá o resultado desejado.

Portanto, insira do $('.data').datepicker() dentro de sua função.

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>

Isso será suficiente para que o $('.data') seja chamado após existir, assim fazendo o que deseja. :D

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .