Função live() da jQuery

Uma das coisas que mais me agradam na jQuery é a manipulação de eventos. Para quem não conhece, veja o código a seguir:

$("td a").click(function(){
	$(this).closest("tr").children("td").toggleClass("highlight");
	return false;
});

Este código vai executar a função passada como parâmetro ao se clicar nos links que estiverem dentro de colunas (veja um exemplo da função closest(), usada no exemplo, clicando aqui).

É bom lembrar que o comando return false é usado para que não seja executado o evento padrão do browser que é o direcionamento para o arquivo que esteja no atributo href do link.

Eventos e Manipulação do DOM

Até aqui tudo tranquilo. Mas se sua aplicação manipula o DOM, criando ou excluindo elementos do documento, a manipulação de eventos pode dar trabalho.

Neste exemplo clique no link para criar uma nova linha na tabela e depois clique no link Comprar da nova linha. O evento não irá funcionar. Segue o código:

$(document).ready(function(){
	$("td a").click(function(){
		$(this).closest("tr").children("td").toggleClass("highlight");
		return false;
	});
	$("#cria-linha").click(function(){
		$("tbody").append('
 
50
Melancia
10,00
<a title="Comprar" href="#">Comprar</a>
 
');
		return false;
	});
});

O código que citei acima, criará o evento click nos elementos que estiverem no DOM no momento do carregamento da página. E não irá funcionar para elementos criados de forma dinâmica por sua aplicação.

Até a versão 1.2 da jQuery, tínhamos que usar alternativas para contornar o problema. Eu uso/usava o seguinte código:

$(document).ready(function(){
	$("td a").click(function(){
		$(this).closest("tr").children("td").toggleClass("highlight");
		return false;
	});
	$("#cria-linha").click(function(){
		$("tbody").append('
 
50
Melancia
10,00
<a title="Comprar" href="#">Comprar</a>
 
');
		$("td a").unbind("click").bind("click",function(){
			$(this).closest("tr").children("td").toggleClass("highlight");
			return false;
		});
		return false;
	});
});

Veja o exemplo

Este código exclui o evento click, através da função unbind, e recria o evento através da função bind. Desta forma evitamos a duplicação do evento para os elementos que já estavam presentes no DOM e recriamos para todos os elementos novamente. Este código gera um processamento desnecessário e possivelmente queda na performance da aplicação.

A função live(type, fn)

Adicionada na versão 1.3 da jQuery, a função live permite que o evento vinculado aos elementos esteja disponível também para os elementos criados no futuro.

A função aceita os seguintes eventos: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress e keyup.

Já os eventos blur, focus, mouseenter, mouseleave, change e submit não são suportados. Para mais informações consulte a documentação da função http://docs.jquery.com/Events/live#typefn.

Seu uso é simples, veja o código:

$(document).ready(function(){
	$("td a").live("click", function(){
		$(this).closest("tr").children("td").toggleClass("highlight");
		return false;
	});
	$("#cria-linha").click(function(){
		$("tbody").append('
 
50
Melancia
10,00
<a title="Comprar" href="#">Comprar</a>
 
');
		return false;
	});
});

Agora veja o exemplo em funcionamento.

Já que chegou até aqui, que tal ler isto?

Julio Bitencourt: dia 25 de agosto de 2009

Djalma Toledo disse:

Valew pelo post..
27 de agosto de 2009 às 10:24 pm
Luis Carlos da Silva disse:

Vale lembrar também a função die(). Ela faz o oposto da função live(). É como usar a função unbind().
27 de agosto de 2009 às 10:39 pm