3

Olá, estou com um problema em meu código, é um pouco complicado de explicar, mas irei tentar. Meu objetivo é o seguinte, ao clicar nas checkboxes, um alvo é selecionado e adicionado na textarea abaixo, até aí tudo bem. Entretanto, tenho uma outra parte do código que adiciona novas checkboxes as já existentes. Ao clicar no botão as checkboxes são corretamente adicionadas, mas, ao clicar nas novas checkboxes, nada parece acontecer. Por outro lado, se eu clico nas checkboxes já existentes, o valor das novas é corretamente adicionado na textarea.

Segue imagem do problema:

inserir a descrição da imagem aqui

  1. Marcar alvo 1 funcionando adequadamente
  2. ALVO4 adicionado, mas ao marcar nada acontece
  3. Ao marcar também o alvo1, o ALVO4 aparece corretamente.

Obs: Se o ALVO4 for marcado após o alvo1, nada acontece

script.js:

  $(document).ready(function(){
  var checkTest;
  var text;

  $('#addAlvos').click(function() {
        text = $('#textAlvo').val();
        var container = $('#listaAlvos');
        var labels = container.find('label');
        var id = labels.length+1;

        $('#listaAlvos').append('<label class="checkbox-inline" for="checkboxes-'+id+'"><input class="checkbox" type="checkbox" name="alvo[]" id="checkboxes-'+id+'" value="'+text+'">'+text+'</label>');


      });

      $('.checkbox').on('click', function(){
          checkTest = new Array();
          $("input:checkbox:checked").each(function() {

              checkTest.push($(this).val());

          });
          $.ajax({
            type:'POST',
            url:'gerar_alias.php',
            dataType: 'html',
            data:{target_name: checkTest,
            success:function(html){
              $('#textarea').val(html);
              }
            });
        });
      });

HTML

          <div class="form-group">
            <label class="col-md-4 control-label" for="checkboxes"><b>Alvo(s)</b></label>
            <div id="listaAlvos" class="col-md-15">
              <label class="checkbox-inline" for="checkboxes-0">
                <input class="checkbox" type="checkbox" name="alvo[]" id="checkboxes-0" value="alvo1">
                alvo1
              </label>
              <label class="checkbox-inline" for="checkboxes-1">
                <input class="checkbox" type="checkbox" name="alvo[]" id="checkboxes-1" value="alvo2">
                alvo2
              </label>
              <label class="checkbox-inline" for="checkboxes-2">
                <input class="checkbox" type="checkbox" name="alvo[]" id="checkboxes-2" value="alvo3">
                alvo3
            </div>

            <div class="input-group mb-3">
              <input id="textAlvo" type="text" class="form-control" placeholder="Adicionar Alvo" aria-label="Adicionar Alvo" aria-describedby="basic-addon2">
              <div class="input-group-append">
                <button id="addAlvos" class="btn btn-success" type="button">Add</button>
              </div>
            </div>
          </div>
              <div class="form-group">
                <div class="col-md-15">
                  <textarea class="form-control" id="textarea" name="textarea" placeholder="!i a"></textarea>
                </div>
              </div>

gerar_alias.php:

  $alvo = $_POST['target_name'];

  $multiAlvos = implode(' ', $alvo);

  echo 'Atacar '.$multiAlvos;

Espero que consigam compreender o problema, qualquer outra dúvida eu esclareço. Muito obrigado.

2 Respostas 2

1

O bind só está sendo aplicados aos elementos que já estão carregados na tela, ou seja,depois de adicionar o elemento dinamicamente ele não é reconhecido.

Altere a seguinte linha de código

      $('.checkbox').on('click', function(){

para dessa forma

      $('#listaAlvos').on('click', '.checkbox', function(){

Assim o evento estará atrelado ao elemento com id "listaAlvos" e todo elemento adicionado dentro dele com a classe "checkbox" será reconhecido.

3
  • não resolve, aí você só está mudando o seletor e o problema é relacionado ao momento em que o trecho é executado. Commented 15/02/2019 às 14:24
  • Na verdade, resolveu sim, agora está funcionando adequadamente. Commented 15/02/2019 às 14:33
  • Muito obrigado JrD. Funcionou perfeitamente. Você não tem noção do quanto eu quebrei a cabeça pra resolver...e no final o problema era só em uma linha... Obrigado novamente. Commented 15/02/2019 às 14:35
0

Você só faz o bind do evento nos checkboxes que já estão presentes no carregamento da página mas não naqueles que são adicionados dinamicamente... Um atalho é utilizar um método para a rotina do evento e declarar no próprio html ou fazer o bind a cada vez que for adicionar um novo.

Veja no exemplo abaixo, passei a rotina de click para o método checkboxClick e adicionei via atributo no append do novo elemento <input class="checkbox" onclick="checkboxClick" type="checkbox" name="alvo[]"...

$(document).ready(function(){
    var checkTest;
    var text;

    $('#addAlvos').click(function() {
        text = $('#textAlvo').val();
        var container = $('#listaAlvos');
        var labels = container.find('label');
        var id = labels.length+1;

        $('#listaAlvos').append('<label class="checkbox-inline" for="checkboxes-'+id+'"><input class="checkbox" onclick="checkboxClick" type="checkbox" name="alvo[]" id="checkboxes-'+id+'" value="'+text+'">'+text+'</label>');
    });

    $('.checkbox').on('click', checkboxClick );
});

let checkboxClick = function(){
        checkTest = new Array();

        $("input:checkbox:checked").each(function() {
          checkTest.push($(this).val());
        });

        $.ajax({
            type:'POST',
            url:'gerar_alias.php',
            dataType: 'html',
            data:{target_name: checkTest,
            success:function(html){ $('#textarea').val(html); }
        });
    }
1
  • Muito obrigado por responder, acabei não testando a implementação, pois a resposta do JrD foi suficiente para sanar o problema. De qualquer forma, agradeço demais a atenção. Commented 15/02/2019 às 14:36

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 .