Help to capture change in field checkbox

Navigation
0

I have the following code that fetches the product and creates the row in the table the way I want it and then stores the data in a Json to be sent per post.

Only works when I insert a new product. But I needed to store Json whenever I tagged a checkbox that I create with jquery. But I'm not finding the command that does this. I've tried all kinds of commands. I even test the console to show a message when I click on the checkbox, but it does not show any messages. Can someone help me on how to capture the change in the checkbox?

I've tried $( "input[type=checkbox]" ).on( "click", armazenarCampos); but it does not update.

The code that generates the table follows: 

var codigo = $("#codigo_barras");
codigo.on("keydown",function(e){
      if(e.which == 13) {
          e.preventDefault();
          $.get("controle/pedido-troca-pendente-busca-produto.php?codigo="+codigo.val(),geraLinha);
      }
});

function geraLinha(data){
  var produto = jQuery.parseJSON(data);
  if(produto.id_produto!=0){
      var linha  = $("<tr>").addClass("linha");
      var colunaProduto = $("<td>").text(produto.produto);
      var colunaTamanho = $("<td>").text(produto.tamanho);
      var colunaPreco = $("<td>").text(produto.preco);
      var colunaUsuario = $("<td>").text(produto.usuario);
      var colunaDefeito = $("<td>");
      var colunaRemove = $("<td>");

      var campoIdProduto = $("<input>").addClass("id_produto").attr("type","hidden").attr("value",produto.id_produto);
      var campoTamanho = $("<input>").addClass("tamanho").attr("type","hidden").attr("value",produto.tamanho);
      var campoPreco = $("<input>").addClass("preco").attr("type","hidden").attr("value",produto.preco);
      var campoTipoCobranca =$("<input>").addClass("tipo_cobranca").attr("type","hidden").attr("value",produto.tipo_cobranca);
      var campoIdTabela = $("<input>").addClass("id_tabela").attr("type","hidden").attr("value",produto.id_tabela);
      var campoDefeito = $("<input>").addClass("defeito").attr("type","checkbox").attr("value","true");

      var link = $("<a>").addClass("botao-remover").addClass("btn").addClass("btn-danger").addClass("glyphicon").addClass("glyphicon-trash").attr("href","#");

      colunaDefeito.append(campoDefeito);
      colunaRemove.append(link);

      linha.append(colunaProduto);
      linha.append(colunaTamanho);
      linha.append(colunaPreco);
      linha.append(colunaUsuario);
      linha.append(colunaDefeito);
      linha.append(colunaRemove);

      linha.append(campoIdProduto);
      linha.append(campoTamanho);
      linha.append(campoPreco);
      linha.append(campoTipoCobranca);
      linha.append(campoIdTabela);

      $("#troca-pendente").append(linha);
      codigo.val("");

  }else{
    $("#erro").toggle();
    setTimeout(function(){
        $("#erro").toggle();
    },2000);
  }

  armazenarCampos();
}

function armazenarCampos() {
    if($('.linha').length>0){
    var produtos = [];

        $('.linha').each(function(){
            var id_produto = $(this).find(".id_produto").val();
            var tamanho = $(this).find(".tamanho").val();
            var preco = $(this).find(".preco").val();
            var tipo_cobranca = $(this).find(".tipo_cobranca").val();
            var id_tabela = $(this).find(".id_tabela").val();
            if($(this).find("input:checked").val()){
              var defeito = 1;
            }else{
              var defeito = 0;
            }

            var produto = {
              id_produto:id_produto,
              tamanho:tamanho,
              preco:preco,
              tipo_cobranca:tipo_cobranca,
              id_tabela:id_tabela,
              defeito:defeito
            };
          produtos.push(produto);
        });

        $("#produtos-troca").attr("name","produtos-troca").attr("value",JSON.stringify(produtos));
    }
}

html generated by jquery: 

<tbody id="troca-pendente">
    <tr class="linha">
        <td>165 Caramelo</td>
        <td>34</td>
        <td>39.90</td>
        <td>Admin</td>
        <td><input class="defeito" type="checkbox" value="true"></td>
        <td><a class="botao-remover btn btn-danger glyphicon glyphicon- 
            trash" href="#"></a></td>
        <input class="id_produto" type="hidden" value="7">
        <input class="tamanho" type="hidden" value="34"><input class="preco" 
               type="hidden" value="39.90">
        <input class="tipo_cobranca" type="hidden" value="1">
        <input class="id_tabela" type="hidden" value="3">
    </tr>
    <tr class="linha">
         <td>01 Preto</td>
         <td>38</td>
         <td>39.90</td>
         <td>Admin</td>
         <td><input class="defeito" type="checkbox" value="true"></td>
         <td><a class="botao-remover btn btn-danger glyphicon glyphicon- 
             trash" href="#"></a></td>
         <input class="id_produto" type="hidden" value="8">
         <input class="tamanho" type="hidden" value="38">
         <input class="preco" type="hidden" value="39.90">
         <input class="tipo_cobranca" type="hidden" value="1">
         <input class="id_tabela" type="hidden" value="3">
      </tr>
  </tbody>
    
asked by anonymous 29.11.2018 / 14:00

1 answer

1

As you are generating the checkboxes dynamically, when you run $("input[type=checkbox]").on( "click", armazenarCampos) they do not yet exist.

Then you will be listening to the click event only of the input[type=checkbox] already on the screen, not those that will exist in the future.

To work with events in dynamic elements there is a technique called Event Delegation, which I explain in more depth in the question: Difference between the 'click', 'bind', 'live', 'delegate', 'trigger' and 'on' functions .

To use event handlers in jQuery, just use the jQuery.on() method to make the event handler an element parent, who is already in HTML, listen for events from child elements.

In your case you can use: 

$("#troca-pendente").on("click", ".defeito", armazenarCampos);
// ^ Elemento pai                 ^ Target do evento

Example without delegation: 

let template = '
<label>
    <input type="checkbox"> Checkbox dinâmico
</label>
';

$('#add').on('click', function() {
    $(document.body).append(template);
});

// Handler de eventos no próprio input
$('input').on('change', function() {
    $(this).closest('label').toggleClass('active', this.checked);
});
label {
    display: block;
}

label.active {
    color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><buttonid='add'>Add</button><label><inputtype="checkbox"> Checkbox já existente
</label>

Example with delegation: 

let template = '
<label>
    <input type="checkbox"> Checkbox dinâmico
</label>
';

$('#add').on('click', function() {
    $(document.body).append(template);
});

// Handler de eventos em um elemento pai (delegação de eventos)
$('body').on('change', 'input', function() {
    $(this).closest('label').toggleClass('active', this.checked);
});
label {
    display: block;
}

label.active {
    color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><buttonid='add'>Add</button><label><inputtype="checkbox"> Checkbox já existente
</label>
    
29.11.2018 / 14:34
After triggering a pdf download service on jmeter, can the "badly formatted" response be a pdf? If yes, how? How to make calculations with elements of an array in Ruby? [closed]