Evento de jQuery para itens carregados via ajax

Passei por este problema hoje, criei uma mensagem de sucesso na tela que teria que ser  escondida quando algum input do form recebesse um ‘focus’. A minha versão original estava ok, só que com a evolução do sistema o formulário passou a ser recarregado e com isso minha função perdeu a ação.

Antes estava assim:

$('form input').focus(function () {
  $('.mensagemAlertaAcerto , .mensagemAlertaErro').fadeOut(2000);
});

A solução achei no Stack Overflow e na documentação do jQuery, que se resume com a utilização do event handler on() ou delegate(). Assim o evento pega inclusive os itens que foram carregados depois de o script ter sido lido. Ficou assim:

$("form").on("focus", "input", function () {
  $('.mensagemAlertaAcerto , .mensagemAlertaErro').fadeOut(2000);
});

O delegate() é usado nas versões mais antigas do jQuery mas aparentemente ainda funciona, com alguma diferença na performance, se isso for importante…

Referências:
http://api.jquery.com/delegate/

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s