Tutorial jQuery – Método $.live();

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:

8 Comments

  1. 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.

  2. 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
    });

  3. É 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.

  4. 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;
    });

    });

  5. Pingback: JQuery reconhecer HTML carregado via Ajax | Tas Blog : Cotidiano de um programador PHP

  6. Robson

    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.

  7. Pingback: JQuery reconhecer HTML carregado via Ajax | Prof. Tiago A. Silva

Leave a Reply

Your email address will not be published. Required fields are marked *