Error with prechimento and Submit of fields via ajax

Question

$('#grupo_prod').blur(function(){
   
   var grupo = $('#grupo_prod').val();
   var filial = $('#filialAtual').val();

   $.ajax({
    method: "POST",
    url: base_url+"pdv2/selecionarProduto/",
    dataType: "html",
    data: { grupo: grupo, filial: filial}
    })
    .done(function( response ) {

    $('#produto_desc').html(response);
    $('#produto_desc').removeAttr("disabled", "disabled" );
    //document.getElementById('prod_desc').focus();
    $('#produto_desc').select2('open');
    
    });
   
});

$('#produto_desc').change(function(){
   
   var prod = $('#produto_desc').val();
   var filial = $('#filialAtual').val();

   $.ajax({
    method: "POST",
    url: base_url+"pdv2/estoqueProdutoId/",
    dataType: "JSON",
    data: { produto: prod, filial: filial}
    })
    .done(function( response ) {
    $("#estoque").text(response[0].produto_estoque);    
    $("#valor_unit").val(response[0].produto_preco_venda);
    $("#pvm").text(response[0].produto_preco_minimo_venda);
    $("#pcd").text(response[0].produto_preco_cart_debito);
    $("#pcc").text(response[0].produto_preco_cart_credito);
    
   // document.getElementById('quantidade').focus();
    $("#quantidade").focus();
    // $('#quantidade').select2('open');
    
    });
    
    $('#total-item').blur(function(){
   
   var quantidade = $('#quantidade').val();
   var subTotal = $('#total-item').val();
   var venda  = $('#idVenda').val();
   var produto = $('#produto_desc').val();
   var filial = $('.filialAtual').text();

   $.ajax({
      method: "POST",
      url: base_url+"pdv2/additensVendas/",
      dataType: "JSON",
      data: { quantidade: quantidade, subTotal: subTotal, venda: venda, produto: produto, filial: filial },
      success: function(data)
       {
         if(data.result == true){
           location.reload();
         }
         else{
           alert('Quantidade sem estoque!');
         }
       }
      
    });
   
});

I have the code above where even make a query via ajax and fill in some fields and after filling in the fields, the last function of the code insert the data in the database. The problem is that if user for example searches twice a group ajax is inserting twice even having only one value in the fields, I noticed that each time Usario passes the function $('#produto_desc').change(function() makes these duplicities.

Answer 1

The problem is that you are placing events within events. For example, you are placing $('#total-item').blur(function(){ within the $('#produto_desc').change(function(){. This causes a new instance of the Blur event to be created each time the change event is triggered.

The same is true that each event is separate from each other, like:

$('#produto_desc').change(function(){
 ...
});

$('#total-item').blur(function(){
...
});

Or else you could leave the code as it is, using the .one(), that creates the instance only once, changing the $('#total-item').blur(function(){ for:

$('#total-item').one("blur", function(){