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

software engineer @hole19golf, #javascript #nodejs #ruby #java #php #scala #python

Twitter LinkedIn 

Be Sociable, Share!

Posts Relacionados:

7 thoughts on “Tutorial jQuery – Método $.live();

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

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

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

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

    });

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

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

Leave a Reply

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