Delegando listener no JQuery sem problemas

Também estamos lá
Facebook Twitter Linkedin Pinterest

O JQuery é o framework Javascript, e a cada nova versão, novos recursos são implementados. Nas últimas versões, foram implementados novos métodos que possibilitam a delegação de listener sem maiores dificuldades.

Como utilizar os novos métodos On e Off do JQuery

DELEGANDO EVENTOS

Ao definir listener de eventos no JQuery, a forma mais utilizada e a mais simples é:

Até ai tudo bem. Acontece que se o seletor for adicionado ao DOM depois que a página for carregada com a utilização do método append() do JQuery, com a uma execução Ajax, o listener se perderá uma vez que o elemento do seletor ainda não existia quando o listener for definido.

Conforme a própria equipe do JQuery recomenda, a melhor forma de construir listeners é com a utilização do método on() e para destruir usar o método off().

Então o código acima ficaria assim:

Isso funcionaria mas não resolveria o problemas da perda do listener para os elementos adicionados posteriormente ao DOM. Para resolver o problema, deve-se utilizar a segunda sintaxe do método on(), passando-se o seletor que receberá o listener no segundo parâmetro de on().

Desta forma, estamos construindo o listener para a evento click para todo o documento (document) que já está no DOM, e passando o a seletor de filtro, no exemplo uma âncora, como filtro. Assim, todos os elementos de âncora que fazem parto de document, incluindo os adicionados posteriormente ou dinamicamente ao DOM, receberam o listener.

REMOVENDO EVENTOS

Já, se for necessário remover um listener de um elemento do DOM, deve-se utilizar o método Off().

Jorge Rodrigues

Jorge Rodrigues

Webmaster e desenvolvedor web full-stack. Self-employed na Concepção Web. Técnico em processamento de dados, com especialização em Programação de Computadores, Redes Locais e em Protocolo e Cabeamento Estruturada de Redes Locais pela Universidade Estácio de Sá.

More Posts