0

Tenho um formulário que crio os campos input dinamicamente (ASP.NET MVC C#), quando o usuário digitar em um campo, desejo executar um ajax para preencher os outros campos.

Quando criei um teste.html, com os campos fixos e não sendo criado dinamicamente, funciona tudo!

Como visto em: https://fiddle.jshell.net/nmcpjpss/3/ basicamente é o seguinte código:

$(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); 
    }
  });
});

Ao debugar no Chrome, percebo que o _this retorna n.fn.init(1) o que acredito que significa que ele encontrou o campo. por isso funciona.

Porém quando executo no meu formulário criado dinamicamente, ele me retorna n.fn.init(0), acredito que nesse momento o jquery não encontrou na árvore DOM o meu objeto. Porque no teste ele sobe o objeto pro DOM e no formulário dinamico não?

Existe alguma forma de eu fazer o que estou querendo?

testei também com outros formatos, mas todos retornam o campo errado no formulário dinamico e correto no teste.

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

Minha pergunta original: jquery blur em inputs dinamicos

Encontrei uma pergunta semelhante e ele confirma que o erro é pq o seletor não foi encontrado no DOM https://stackoverflow.com/questions/34494873/why-is-my-jquery-selector-returning-a-n-fn-init0-and-what-is-it porém não explica uma possível solução.


Update: Conforme sugestão fiz o recarregamento do blur, porém mesmo erro, para deixar mais claro o erro no formulário dinâmico, segue as imagens:

Teste.html (funciona) inserir a descrição da imagem aqui

Formulário Dinâmico (errado) inserir a descrição da imagem aqui

Resposta final

Após ajuda dos posts abaixo, tive que fazer uma solução hibrida entre Jquery e Javascript puro. Não ficou da forma mais elegante, mas infelizmente foi a única que funcionou, utilizando o jquery com .nextall não funcionou de nenhuma forma.

    $(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;
                    }
                });
            }
        });
   });

resumindo, tive que buscar o css por document.getElementsByClassName que me retorna um array e assim trabalhar com o campo desejado.

4
  • Mostra o código de quando cria os inputs dinamicamente, provavelmente o erro está lá. 7/08/2017 às 13:50
  • não entendi?, eu copiei o html gerado para o meu teste e funcionou, o html está no link fiddler
    – Dorathoto
    7/08/2017 às 14:18
  • gostaria de quem colocou -1 pudesse me orientar pq essa pergunta não faz parte do scopo do site? visto que a pergunta americana tem up.
    – Dorathoto
    7/08/2017 às 17:04
  • calma colega rs, a linha var proModelo = _this.nextAll('input.marcaModeloCss:first'); tinha que retornar o próximo input desses, no fiddle lá funcionou, será que no seu HTML eles não são irmãos? Sobre o document.getElementsByClassName, usando como está você está sempre alterando os 3 primeiros do documento, não necessariamente os com relação ao input que você pegou o valor.
    – Dudaskank
    8/08/2017 às 11:59

2 Respostas 2

2

Realmente como amigo falou na outra resposta, é melhor usar o .delegate(). Basta alterar seu código original:

De:

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

Para:

$(document).delegate('.placaCss','blur', function() {
4
  • Valeu David, porém não deu certo, veja as novas imagens que postei com o seu código.
    – Dorathoto
    7/08/2017 às 17:05
  • Faltou chamar a função aplica() após o retorno do Ajax.
    – Meu ovo
    7/08/2017 às 17:09
  • Deixa seu código como estava e aplique a alteração acima em apenas 1 linha do código.
    – Meu ovo
    7/08/2017 às 17:40
  • Só uma observação, delegate() está "deprecated", é recomendado usar o on() segundo a documentação: api.jquery.com/delegate
    – Dudaskank
    7/08/2017 às 19:53
1

Quando você conecta o elemento no evento blur, usando o método blur(), ele busca na página naquele momento os seletores e anexa diretamente a função handler. Se após isso você insere os novos campos do formulário, o handler não será chamado pois não está anexado ao novo elemento.

Para contornar isso, use o método on para delegar os eventos, no seguinte formato:

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

Desse modo, o evento não é chamado diretamente no elemento com classe placacss, mas sim nos descendentes de document que são input e possuem a classe placaCss, que é o que o seletor nesse caso diz.

Esse modo de anexar os eventos é chamado de delegated events.

Outra coisa, ao usar $('.placaCss').blur('input', function() {...}), você está passando a string input como dado, e não um seletor, como pode observar na documentação do método blur mais abaixo.

Fontes:

6
  • $('.placaCss').on('blur', 'input', function () { nem executa a função...
    – Dorathoto
    7/08/2017 às 19:44
  • Agora pude olhar o seu HTML e entendi como está a estrutura, já fiz o ajuste, conforme o David também indicou.
    – Dudaskank
    7/08/2017 às 19:50
  • agora rodou, mas ainda estou com o erro que é do meu anunciado o var proModelo = _this.nextAll('input.marcaModeloCss:first'); não encontra o campo, ele fica com o mesmo valor de _this
    – Dorathoto
    7/08/2017 às 20:01
  • Eles não são do mesmo valor. A string n.fn.init(1) indica que há um elemento no objeto jQuery que retornou, se você imprimir ele no console, verá que cada um deles é um objeto diferente.
    – Dudaskank
    7/08/2017 às 20:23
  • é mas no caso está n.fn.init(0) ou seja ele não acha! _this.nextAll('input.marcaModeloCss:first'); não acha quando é dinamico
    – Dorathoto
    7/08/2017 às 20:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .