Falaremos 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, precisarmos criar ferramentas tão dinâmicas que acabamos por utilizar
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 anexar 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 árvore.

• 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 tenham 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 índice 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 da 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();