jquery Blur in dynamic inputs

Question

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="">

Note that in the ID is injected a Guid in which I have no control.

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

I managed to do via Style that I created called placaCss but it works wrong, because it is even called for each input but changes all others

My code:

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

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

Spinning in the fiddle https://fiddle.jshell.net/nmcpjpss/1/

Answer 1

I believe that’s 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: <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">
<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="">

Answer 2

Tries delegation of events:

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