Materialize label not working when inserted by Jquery

0

I am trying to make a dynamic field where the user can put the information according to the amount of courses he has done. For this I created the Script that when clicking the button makes the addition, however the label of the inputs does not appear.

JavaScript:

   function novoCurso(id){
          $('.botao').remove();

          instituicaoDiv = $('<div>');
          instituicaoDiv.addClass('input-field col s12 m4 l4');

          instituicaoInput = $('<input>');
          instituicaoInput.addClass('validate curso' + id + '-instituicao');
          instituicaoInput.attr('name', 'curso' + id + '-instituicao');
          instituicaoInput.attr('type', 'text');
          instituicaoInput.attr('id', 'curso' + id + '-instituicao');

          instituicaoLabel = $('<label>');
          instituicaoLabel.attr('for', 'curso' + id + '-instituicao');

          instituicaoDiv.append(instituicaoLabel);
          instituicaoDiv.append(instituicaoInput);

          // ###########################################################

          nomeDiv = $('<div>');
          nomeDiv.addClass('input-field col s12 m4 l4');

          nomeInput = $('<input>');
          nomeInput.addClass('validate curso' + id + '-nome');
          nomeInput.attr('name', 'curso' + id + '-nome');
          nomeInput.attr('type', 'text');
          nomeInput.attr('id', 'curso' + id + '-nome');

          nomeLabel = $('<label>');
          nomeInput.attr('for', 'curso' + id + '-nome');

          nomeDiv.append(nomeLabel);
          nomeDiv.append(nomeInput);

          // ###########################################################

          duracaoDiv = $('<div>');
          duracaoDiv.addClass('input-field col s12 m4 l4');

          duracaoInput = $('<input>');
          duracaoInput.addClass('validate curso' + id + '-duracao');
          duracaoInput.attr('name', 'curso' + id + '-duracao');
          duracaoInput.attr('type', 'text');
          duracaoInput.attr('id', 'curso' + id + '-duracao');

          duracaoLabel = $('<label>');
          duracaoLabel.attr('for', 'curso' + id + '-duracao')

          duracaoDiv.append(duracaoLabel);
          duracaoDiv.append(duracaoInput);

          // ###########################################################

          botaoDiv = $('<div>');
          botaoDiv.addClass('col s12 m12 l12 left botao');

          a = id + 1;
          botaoA = $('<a>');
          botaoA.addClass('waves-effect waves-light btn-small');
          botaoA.attr('onclick', 'novoCurso(' + a + ')');
          botaoA.text('Adicionar Curso');

          botaoI = $('<i>');
          botaoI.addClass('material-icons right');
          botaoI.text('add');

          botaoA.append(botaoI);

          botaoDiv.append(botaoA);

          $('.cursos').append(instituicaoDiv);
          $('.cursos').append(nomeDiv);
          $('.cursos').append(duracaoDiv);
          $('.cursos').append(botaoDiv);

          M.updateTextFields();

          duracaoInput.change();

      }
    
asked by anonymous 28.06.2018 / 22:15

0 answers