Hoje vou falar sobre um método do jQuery muito útil, muito mesmo. Mais informações em inglês pode ser encontrada na documentação oficial do método .live().
O Problema
É muito comum quando estamos desenvolvendo aplicações para Internet e precisamos criar ferramentas tão dinâmicas que acabamos por utilizarmos quase todo o potencial que o JavaScript dispõe a oferecer. Nas ferramentas que desenvolvo é muito comum a interface da ferramenta ser controlada e alterada quase que o tempo todo através da manipulacão do DOM e muitas vezes precisamos atachar comportamentos em um determinado elemento da página.
Por exemplo: Temos um sistema de comentários onde todos os comentários são carregados e as respostas destes comentários aparecem como arvore.
- Comentário 1
- Comentário 2
- Resposta do comentário 2
- Resposta da resposta do comentário 2
- Comentário 3
E assim vai…
Eu posso responder em tempo real um comentário e ele ja vai aparecer para mim. Tudo via jQuery. Quando fazemos uma varredura no DOM do documento usando os seletores do jQuery, procuramos por todos os botões que tenha a classe “responder” que originalmente ficam sem ação e depois, via jQuery damos ação ao elemento.
$('.responder').bind('click', function() {
// instruções
});
Neste ponto, temos um problema. O indice de elementos do jQuery é estático, ele não atualiza automaticamente. Se um novo botão responder surgir na tela o jQuery não surtirá efeito sobre ele, pois ele apareceu DEPOIS da primeira varredura no DOM quando eu usei o seletor $(‘.responder’).
Solução
Para corrigir este problema, podemos utilizar o .live() do jQuery. Independente de quando e a quantidade de botões que surgirem na tela o jQuery irá acrescenta-lo em seu índice e você poderá manipula-lo da forma como quiser.
$('.responder').live('click', function() {
// instruções
});
Caso queira adicionar ao DOM o mesmo comportamento em mais de um evento, basta fazer o seguinte:
$('.responder').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
// faça isso
} else {
// faça aquilo
}
});
Ou crie 2 lives separadamente para cada evento.
$('.responder').live('mouseover', function() {
// instruções
});
$('.responder').live('mouseout', function() {
// instruções
});
A princípio o conceito pode ser um pouco confuso. Fica difícil de entender isso quando nunca se passou pelo problema. O dia que algo não funcionar como o esperado pelo jQuery nem simplesmente ter sido chamado, lembre-se do $.live();
Igor
[]‘s
Posts Relacionados:
