Javascript - Focusout does not activate AJAX

Question

Hello! I’m having a problem with JS which is the following: The focusout event is not activating $.ajax

JS:

$('.focusout_input_budget').focusout(function () {
  var amount = $(this).val(),
      id = $(this).parent('.line-table-products').attr('data-id'),
      nomeprod = $(this).parent('.line-table-products').find('.coll1-line-product-list').html();

  if (amount > 0) {
     $.ajax({
        url : SITE  + 'addbudget',
        type: "POST",
        dataType: "JSON",
        data: { id: id, amount: amount, nomeproduto: nomeproduto },
        async: false,
        success: function (json) {
           json = json;
           if (json['true'] === 'true') {
              $('.icon-inform-budge').html(json['quant']);
              console.log(json['quant']);
              if (json['quant'] == 1) { 
                 $('#products-budge-top li').first().remove();
                 var li = "<li class='item-product-budge-top'>"+json['nome']+"</li>";
                 $('#products-budge-top').append(li);
              }
              if (json['quant'] > 1 && json['quant'] <= 5) {
                 $('#products-budge-top li').last().remove();
                 var li = "<li class='item-product-budge-top'>"+json['nome']+"</li>";
                 $('#products-budge-top').append(li);
              }
              if (json['quant'] == 6) {
                 $('#products-budge-top li').last().remove();
                 var li = "<li class='item-product-budge-top'>Ver todos os produtos...</li>";
                 $('#products-budge-top').append(li);
              }
              if(json['quant'] >= 6){
                 $('#products-budge-top li').first().remove();
                 var li = "<li class='item-product-budge-top'>"+json['nome']+"</li>";
                 $('#products-budge-top').append(li);
              }                     
              var link = SITE + 'carrinho';
              var last = "<li class='item-product-budge-top'><a href='"+link+"' title='acessar carrinho' class='button-budget-budge-top'>Revisar Orçamento</a></li>";
              $('#products-budge-top').append(last);

              $(this).html('ADICIONADO COM SUCESSO');
              setTimeout(function(){
                 $('.button-add-product-budget').html('ADICIONAR AO ORÇAMENTO');
              },200);           
           } else {
              $(this).html('ERRO AO ADICIONAR');
              setTimeout(function(){
                 $('.button-add-product-budget').html('ADICIONAR AO ORÇAMENTO');
              },2000);            }
        }
     });

  } else {
     $.ajax({
        url : SITE  + 'removebudget',
        type: "POST",
        dataType: "JSON",
        data: { id:id },
        async: false,
        success: function(json){
           json = json;
           if(json == 'true'){
              location.reload();
           }
        }
     });
  }
});

html:

<ul id="main-products">
            <li class="line-table-products line-title-table-products">
                <span class="coll-line-product coll-title-line-product coll1-line-product">NOME DO PRODUTO</span>
                <span class="coll-line-product coll-title-line-product coll2-line-product">UNIDADE</span>
                <span class="coll-line-product coll-title-line-product coll3-line-product">QUANTIDADE</span>
                <span class="coll-line-product coll-title-line-product coll4-line-product">ADICIONAR AO MEU ORÇAMENTO</span>
            </li>
            <?php foreach($produtos as $prod){ ?>
            <li class="line-table-products" data-id="<?php echo $prod->codigo; ?>">
                <span class="coll-line-product coll1-line-product coll1-line-product-list <?php if(check_size_line($prod->nome, 36, 'space') == 'true') echo 'item-large-size-products'; ?>"><?php echo $prod->nome; ?></span>
                <span class="coll-line-product coll2-line-product"><?php echo $prod->unidade; ?></span>
                <div class="coll-line-product coll3-line-product">
                    <img src="<?php echo IMG . 'px.png'; ?>" alt="Icone diminui quantidade" data-operation="subtraction" class="icon-amount-product-budget icon-decrease-product-budget" />
                    <input type="text" name="productqtd" value="<?php echo check_prod_in_budget($prod->codigo); ?>" placeholder="00" class="input-amount-product-budget focusout_input_budget"/>
                    <img src="<?php echo IMG . 'px.png'; ?>" alt="Icone diminui quantidade" data-operation="sum" class="icon-amount-product-budget icon-increase-product-budget" />
                </div>
                <span class="coll-line-product coll4-line-product button-add-product-budget">ADICIONAR AO ORÇAMENTO</span>
            </li>
            <?php } ?>
        </ul>

Someone could help me?

Answer 1

There is an error in your if, some '{' were in wrong places, put it that way:

if(amount > 0){
    $.ajax({
        url : SITE  + 'addbudget',
        type: "POST",
        dataType: "JSON",
        data: { id:id, amount:amount, nomeproduto:nomeproduto },
        async: false,
        success: function(json){
            json = json;
            if(json['true'] == 'true'){
                $(this).html('ADICIONADO COM SUCESSO');
            }
            else {
                $(this).html('ERRO AO ADICIONAR');
            }
        }
    });

}

---

Below is a functional example using jquery on().

jQuery(document).ready(function(){
  jQuery('#teste').on('focusout',function(){
     alert('focusout ativado');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="teste">