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
- 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.
[javascript]
$(‘.responder’).bind(‘click’, function() {
// instruções
});
[/javascript]
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.
[javascript]
$(‘.responder’).live(‘click’, function() {
// instruções
});
[/javascript]
Caso queira adicionar ao DOM o mesmo comportamento em mais de um evento, basta fazer o seguinte:
[javascript]
$(‘.responder’).live(‘mouseover mouseout’, function(event) {
if (event.type == ‘mouseover’) {
// faça isso
} else {
// faça aquilo
}
});
[/javascript]
Ou crie 2 lives separadamente para cada evento.
[javascript]
$(‘.responder’).live(‘mouseover’, function() {
// instruções
});
$(‘.responder’).live(‘mouseout’, function() {
// instruções
});
[/javascript]
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
Igor Escobar 
Nunca usei o .live(), apesar do pessoal aqui da equipe usar. Sou da época em que ao criar elementos novos, re-atachava funções/métodos aos eventos.
Acho uma ótima solução o live(), só tenho medo da performance – não sei como funciona, mas deve ter um monte de listeners que ficam varrendo qualquer coisa nova criada no DOM.
LikeLike
O método live interage somente dentro do range de elementos que você passa dentro do $(…….).live(); não se preocupe, ele não fica varrendo o DOM inteiro, não subestime nosso querido john 🙂
LikeLike
Recenetemente descobri um problema na função live() referente ao nosso querido navegador IE. Se você deseja usar o evento ‘change’ na função live, o IE não consegue disparar o evento. Para resolver isso devemos usar o delegate(). A sintaxe dele é quase igual ao do live(), usa-se: $(‘body’).delegate(‘…’,’change’,function(){
// instruções
});
LikeLike
É verdade! descobri isso na pior maneira recentemente, até twittei sobre isso. E tem outros metodos que o metodo live não cobre. Não sabia que o metodo delegate cobria! eu acabei corrigindo isso fazendo do jeito mais difícil rs.
LikeLike
Ola pessoal alguem pode me ajudar o metodo .live() nao funciona no meu codigo
$(function(){
$(“#add”).click(function(){
var input = ”;
input += ‘Proldutos: ‘;
input += ‘ Qtd: ‘;
input += ‘X ‘;
$(“#campos”).append(input);
return false;
});
$(“.del”).Live(“click”,function(){
$(this).parent().remove();
return false;
});
});
LikeLike
Bom dia pessoal. Estou tentando disparar um evento change com o delegate, mas não funciona de jeito nenhum.
Veja meu código:
$(‘body’).delegate(‘.locadora’,’click’, function(){
$(this).hide();
});
Teste 1
Teste 2
Essa tabela é adicionada dinamicamente. Mas eu queria que ela fosse adicionada com uma linha oculta.
LikeLike