0

O script abaixo adiciona grupos de campos em um formulário. Até aí ok. Os campos são adicionados porém quando envio o formulário só recebo os dados dos inputs fixos, os que são adicionados dinamicamente não são recebidos.

Código:

$(document).ready(function() {
  var max_fields = 100; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  var token = $('#token').val();
  var x = 1; //initlal text box count
  
  $(add_button).on({click: function(e){ //on add input button click
    e.preventDefault();
    var length = wrapper.find("input:text").length;
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('ADD INPUTS'); //add input box
    }

    wrapper.find("input:hidden").each(function() {
      $(this).val()
    });
    
    $(function (){
    $('.select2').select2()
    });

  }});
 
  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});

1 Resposta 1

1

O problema pode ser resolvido de forma simples.

O Jquery recebe e armazena todos os elementos da página no momento em que ela é carregada, então quando criamos um novo elemento dinamicamente ele não existe na memória armazenada do Jquery concorda ? (se não concorda apenas aceite, é assim que funciona haha).

Pois bem, para contornamos essa situação, temos que indicar o elemento pai desse novo elemento criado dinamicamente. Lembre-se que o elemento pai já deve existir no momento de carregamento da página.

Vamos supor que ao clicar em um botão a div gerada dinamicamente sofre alteração, segue o exemplo:

$('.jaExisto').on('click', '.dinamicamenteGerado', function(){alert('Olá Mundo')});

Você está dizendo ao Jquery que é para executar determinada função no filho de um elemento que já existia na página!

E caso o seu elemento dinâmico seja filho de outro elemento dinâmico?

Dessa forma teremos que percorrer todos os elementos até chegarmos em um pai que já existia no documento, segue o exemplo:

 $('.jaExisto').on('click', '.dinamicamenteGerado1 .dinamicamenteGerado2 .dinamicamenteGerado3 .dinamicamenteGerado4', function(){alert('Olá Mundo')});

Dessa forma a classe .dinamicamenteGerado4 que é filha dos outros elementos dinâmicos poderá ser alterada!

Essa técnica serve para qualquer elemento dinamicamente gerado!

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 .