Add new checkboxes with ajax

Question

Hi, I’m having a problem with my code, it’s a little complicated to explain, but I’ll try. My goal is the following, when clicking on checkboxes, a target is selected and added in the textarea below, so far so good. Meanwhile, I have another piece of code that adds new checkboxes to existing checkboxes. By clicking the button the checkboxes are correctly added, but by clicking on the new checkboxes nothing seems to happen. On the other hand, if I click on the existing checkboxes, the value of the new ones is correctly added in the textarea.

Follows image of the problem:

1. Mark target 1 working properly
2. ALVO4 added, but when marking nothing happens
3. When also marking target1, ALVO4 appears correctly.

Note: If ALVO4 is marked after alvo1, nothing happens

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;

I hope you can understand the problem, any other doubt I clarify. Thank you very much.

Answer 1

The bind is only being applied to elements that are already loaded on the screen, that is, after adding the element dynamically it is not recognized.

Change the following code line

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

for that way

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

So the event will be linked to the element with id "listAlvos" and every element added inside it with the class "checkbox" will be recognized.

Answer 2

You only bind the event in the checkboxes that are already present in the page load but not in those that are added dynamically... A shortcut is to use a method for the event routine and declare in html itself or bind each time you add a new one.

See in the example below, I passed the click routine to the method checkboxClick and added via attribute in the append of the new element <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); }
        });
    }