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 é:
// Exemplo de listener do evento click.
$("[seletor]").click( funcrion() {
[comandos]
} );
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:
// Exemplo de listener do evento click usando on().
$('[seletor]').on('click', function(event) {
event.preventDefault();
});
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().
$(document).on('click', 'a', function(event) {
event.preventDefault();
});
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().
// Remove todos os eventos das âncoras no DOM.
$('a').off();
// Remove apenas o evento "submit" de todos os formulários no DOM.
$('form').off('submit');
