Caras, como fico impressionado, ao pesquisar por algum assunto que eu gostaria de postar, e encontro logo na primeira página do google 6 entre 10 resultados, exatamente o mesmo conteúdo.

Se não bastasse essa evidente duplicação, o conteúdo nem possui qualidade, com isso, blogs sérios com algo realmente importante a dizer, parecem não encontrar a sua relevância.

Legal, o método .live() do jQuery, veio apartir das versões 1.4, existe um plugin chamado livequery [que eu pessoalmente, nunca usei], o .live() nativo desde então, nos ajuda a atrelar eventos aos elementos dinamicamente, mesmo que estes não estejam presentes no DOM, no instante do document.ready

Na prática, o método .live(), atrela as funções aos elementos dinâmicamente, no momento em que você tenta chamar.

O motivo desse método existir, é que se eu criar algum elemento com javascript, ou trazer com ajax, esse elemento que não existia no momento do document.ready, e portanto, não teve o evento atrelado, pode ganhar vida.

Exemplo do ‘problema:’




  
  
  
  
  
  
  
  	
  	
1
2
</html>

Clique primeiro na caixinha 1 ou na 2, vc verá que é exibido um alert, com o texto que está dentro da div.

Depois vá clicando em [add], serão criados mais elementos, com a autonumeração.

apesar desses novos elementos, serem idênticos aos outros 2 que já existiam, estes novos, não disparam o alert() se clicados.

veja:

	$('.box').click(function(){
		oi( $( this ).html() );
	});

É neste trecho que atrelo uma rotina ao evento onclick de todos os elementos que possuirem a class .box

Porém, convém lembrar que os novos elementos, adicionados qndo cliquei no [add], não existiam no instante do document.ready, e portanto, ainda não tiveram o evento atrelado.

Quando vc faz uma requisição ajax, e joga os elementos no documento, com javascript, ocorre o mesmo desse meu exemplo: “Os elementos não existiam, e por isso, ainda não tem o evento atrelado a eles.”

Note que se eu tivesse feito:

$('#campos').append( '<div class="box" onclick="oi( this.innerHTML );">'+i+'</div>' );

este problema não aconteceria. Pois a rotina está explicitamente atrelada ao evento ali.

Porém, como isso é uma má prática de programação javascript [misturar camadas, javascript inline..], vamos ao método jQuery de resolver.

Basta trocar:

	$('.box').click(function(){

por:

	$('.box').live('click', function(){

Somente isso. =)
Qualquer coisa comentem!