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:
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.
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 odocument.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.