jquery n.fn.init(0) in production in n.fn.init test(1)

Question

I have a form that creates the input fields dynamically (ASP.NET MVC C#), when the user type in a field, I want to execute an ajax to fill the other fields.

When I created a test.html, with the fixed fields and not being created dynamically, everything works!

As seen in: https://fiddle.jshell.net/nmcpjpss/3/ basically is the following code:

$(document).ready(function() {
  $('.placaCss').blur('input', function() {
    var valor = $(this).val();
    var _this = $(this);  //Esta linha retorna n.fn.init(1)
    // Verificando se o valor foi preenchido
    if (valor) {
        var proModelo = _this.nextAll('input.marcaModeloCss:first');
        proModelo.val(valor); 
    }
  });
});

When debugging in Chrome, I realize that the _this returns n.fn.init(1) which I believe means he found the field. so it works.

But when I run in my dynamically created form, it returns to me n.fn.init(0), I believe that at this point jquery did not find my object in the DOM tree. Because in the test it rises the object pro DOM and in the dynamical form no?

Is there any way I can do what I want?

I also tested with other formats, but all return the wrong field in the dynamic form and correct in the test.

var t1 = _this.nextAll('.marcaModeloCss:first');
var t2 = _this.nextAll('.marcaModeloCss').first();
var t3 = _this.nextUntil().last().next();

My original question: jquery Blur in dynamic inputs

I found a similar question and it confirms that the error is because the selector was not found in the DOM https://stackoverflow.com/questions/34494873/why-is-my-jquery-selector-returning-a-n-fn-init0-and-what-is-it but does not explain a possible solution.

---

Update: As suggested I reloaded the Blur, but same error, to make clearer the error in the dynamic form, follow the images:

Test.html (works)

Dynamic form (wrong)

Final answer

After help from the posts below, I had to make a hybrid solution between Jquery and pure Javascript. It was not the most elegant, but unfortunately it was the only one that worked, using jquery with . nextall did not work in any way.

    $(document).ready(function () {
        $(document).on('blur', 'input.placaCss', function () {
            var valor = $(this).val();
            var _this = $(this);
            // Verificando se o valor foi preenchido
            if (valor) {
                var campo= document.getElementsByClassName('MarcaModelo');
                $.ajax({
                    type: "GET",
                    url: "/ConsultaVeiculo/Placa?placa=" + valor,
                    dataType: "json",
                    success: function (data) {
                        campo[0].value = data.content.bin.marca;
                        campo[1].value = data.content.bin.ano_fabricacao;
                        campo[2].value = data.content.bin.ano_modelo;
                    }
                });
            }
        });
   });

in short, I had to search the css for document.getElementsByClassName that returns me an array and so work with the desired field.

Answer 1

Really as a friend spoke in the other answer, it is better to use the .delegate(). Just change your original code:

Of:

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

To:

$(document).delegate('.placaCss','blur', function() {

Answer 2

When you connect the element in the event blur, using the method blur(), it searches the page at that time the selectors and directly attaches the Handler function. If after this you enter the new form fields, Handler will not be called because it is not attached to the new element.

To get around this, use the method on to delegate events in the following format:

$(document).on('blur', 'input.placaCss', function() {...});

Thus, the event is not called directly in the class element placacss, but in the descendants of document who are input and have the class placaCss, which is what the selector in this case says.

This way of attaching events is called delegated Events.

Something else, when using $('.placaCss').blur('input', function() {...}), you are passing the string input as given, not a selector, as you can see in the method documentation blur further down.

Sources:

• https://api.jquery.com/on/
• https://api.jquery.com/blur/