O método live() funciona de maneira similar ao método bind() de jQuery, com a particularidade de que a atribuição do evento é "dinâmica" e afeta não só os elementos que casem com o seletor no momento da invocação, como também todos os elementos que possam ser definidos em um futuro e que casem com esse seletor.
Não sei se foi possível entender exatamente o que se consegue com live(), mas podemos vê-lo com um exemplo simples que esclarecerá tudo. Vejamos esta sentença:
$(".minhaclasse").bind("click", minhafunção);
Está definindo um evento "click" sobre todos os elementos da classe (class de CSS) "minhaclasse". Até aqui já devemos conhecer todos até o método bind(), e não deveria haver nenhum problema, mas agora vejamos esta mesma sentença porém, utilizando o método live().
$(".minhaclasse").live("click", minhafunção);
Isto serve para o mesmo que fazíamos com bind(), mas além disso , afetará todos os elementos que possam ter a classe "minhaclasse" no futuro e não só no momento que se executa essa sentença.
Como pode haver outros elementos dessa classe no futuro? Pois simplesmente porque você os crie dinamicamente com jQuery ou porque você atribua dinamicamente uma classe CSS, ou outro atributo, a um elemento que não a tinha, ou que você traga por Ajax um conteúdo e que tenha elementos que casem com o seletor, etc.
<div class="verde">Esta camada tem a classe verde (clique)</div>
<div class="verde">Segunda camada onde coloco a classe verde</div>
<div id="naoverde">Terceira camada que não é verde</div>
<div class="verde">Outra com classe verde</div>
Sem varias divisões onde todas menos uma tem a classe "verde". Vejamos como posso atribuir um evento de tipo "click" por meio do método live():
$(".verde").live("click", function(e){
var elem = $(this);
if (elem.html()!="Voce clicou!!"){
elem.html("Você clicou!!");
}else{
elem.html("Você clicou de novo!!");
}
});
É um evento que permite mudar o texto do elemento quando se clica sobre ele e o aplicamos sobre todos os elementos da classe "verde".
Agora temos um par de botões para fazer coisas com a página e mudá-la um pouco.
<input type=button value="inserir novo elemento verde" id="inserirelem">
<input type=button value="Colocar a classe verde no div que não a tem" id="colocarclasseverde">
Quando se aperta o primeiro botão, vou inserir um novo elemento na página ao que colocaremos a classe "verde". Isso é conseguido com este código:
$("#inserirelem").click(function(e){
var novoElemento = $('<div class="verde">Elemento criado e inserido dinamicamente</div>');
novoElemento.appendTo($(document.body));
});
Os elementos criados ao apertar esse botão terão a classe verde e portanto, a funcionalidade especificada com o método live() para definir o evento click.
O segundo botão atribui a classe "verde" ao elemento DIV do principio, que não a tinha, o que conseguimos assim:
$("#colocarclasseverde").click(function(e){
$("#nãoverde").addClass("verde");
});
Ao atribuir essa classe ao elemento também se aplicará a funcionalidade definida para o evento click com live().
Isto pode ser visto em funcionamento em uma página à parte.
Para acabar, deixamos o código completo desta página de exemplo de live() em jQuery.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html>
<head>
<title>Eventos live</title>
<style type="text/css">
.verde{color: green;}
</style>
<script src="../jquery-1.4.2.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$(".verde").live("click", function(e){
var elem = $(this);
if (elem.html()!="Você clicou!!"){
elem.html("Você clicou!!");
}else{
elem.html("Você clicou de novo!!");
}
})
$("#inserirelem").click(function(e){
var novoElemento = $('<div class="verde">Este elemento foi criado e inserido dinamicamente ( clique)</div>');
novoElemento.appendTo($(document.body));
});
$("#colocarclasseverde").click(function(e){
$("#nãoverde").addClass("verde");
});
})
</script>
</head>
<body>
<div class="verde">Esta camada tem a classe verde (clique)</div>
<div class="verde">Segunda camada onde coloco a classe verde</div>
<div id="nãoverde">Terceira camada que não é verde</div>
<div class="verde">Outra com classe verde</div>
<input type=button value="inserir novo elemento verde" id="inserirelem">
<input type=button value="Colocar a classe verde no div que não a tem" id="colocarclasseverde">
</body>
</html>
