jquery blur on dynamic inputs

Question

jquery blur on dynamic inputs

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a form where I dynamically create the <inputs>

With the following structure:

<input class="form-control placaCss Tamanho200 text-box single-line valid" id="Veiculos_3b875035-ae1b-4b69-8ddc-462bbfd86fbd__Placa" name="Veiculos[3b875035-ae1b-4b69-8ddc-462bbfd86fbd].Placa" type="text" value="" aria-invalid="false">

<input class="form-control text-box single-line veiculo" id="Veiculos_4aa0f9aa-cbbf-4b3a-9a39-de41bed5f773__MarcaModelo" name="Veiculos[4aa0f9aa-cbbf-4b3a-9a39-de41bed5f773].MarcaModelo" type="text" value="">

See that ID is injected into a Guid where I have no control.

What I would like to do is that when I finish typing the board it will execute my javascript function which will have an ajax. But only for the typed input, eg if you have 3 just run in the input typed.

I was able to do via Style that I created called the CSS board but it works wrong because it is even called for each input but changes all the others

My code:

 $(document).ready(function () {
              $('.placaCss').blur('input', function () {

                  if ($(this).val() != "")
                  {
                   $('.Veiculo').val('teste');
                       alert($(this).val());
                  }
              });
          });

Running on the fiddle link

javascript jquery

asked by anonymous 06.08.2017 / 05:14

2 answers

0

Attempt delegation :

$( function () {
    $( ".placaCss" ).on( "blur", function () {
        var valor = $(this).val();
        if ( $(this).val() !== "" ) {
            alert( valor );
        }
    });
});

06.08.2017 / 05:23

Code redundancy in my .xhtml JSF - Primefaces Display and maintain submenu with JQuery

score 1 · Accepted Answer

I believe this is what you need

$(document).ready(function() {
  $('.placaCss').blur('input', function() {
    var valor = $(this).val();
    var _this = $(this);
    // Verificando se o valor foi preenchido
    if (valor) {
      var proVeiculo = _this.nextAll('.veiculo:first');
      proVeiculo.val(valor);
      alert(valor);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Placas:<inputclass="form-control placaCss Tamanho200 text-box single-line valid" id="Veiculos_3b875035-ae1b-4b69-8ddc-462bbfd86fbd__Placa" name="Veiculos[3b875035-ae1b-4b69-8ddc-462bbfd86fbd].Placa" type="text" value="" aria-invalid="false">
<br> Modelo:
<input class="form-control text-box single-line veiculo" id="Veiculos_4aa0f9aa-cbbf-4b3a-9a39-de41bed5f773__MarcaModelo" name="Veiculos[4aa0f9aa-cbbf-4b3a-9a39-de41bed5f773].MarcaModelo" type="text" value="">
<hr> Placas: <input class="form-control placaCss Tamanho200 text-box single-line valid" id="Veiculos_3b875035-ae1b-4b69-8ddc-462bbfd86fbd__Placa" name="Veiculos[b69-8ddc-462bbfd86fbd].Placa" type="text" value="" aria-invalid="false">
<br> Modelo:

<input class="form-control text-box single-line veiculo" id="Veiculos_-cbbf-4b3a-9a39-de41bed5f773__MarcaModelo" name="Veiculos[4aa0f9aa-cbbf-4b3a-9a39-de41bed5f773].MarcaModelo" type="text" value="">