Quando trazemos um conteúdo com ajax, inserimos novos elementos no nosso documento.

Porém, convém notar, que essa inserção ocorre após o DOM estar pronto [document.ready], e que o que veio com ajax, é apenas texto puro. Seja formatado em XML, jSON.. mas ainda assim apenas texto.

É por esse motivo que os elementos trazidos com ajax, ainda não possuem os eventos/plugins atrelados a eles, e por isso ‘não funcionam’.

Para ilustrar, veja esse exemplo, usando o código do lightbox do jQuery

Baixei do site oficial do plugin.

Note que com esse script:

$(document).ready(function() {
		$('#content').load('lightbox.html');
		$('#gallery a').lightBox();
	});

Não esperamos a requisição terminar. O método .load(), faz a requisição de modo assíncrono, isto, é o restante do script não aguarda a requisição terminar para prosseguir. Portanto, a nossa tentativa de instanciar o plugin não funciona.

Temos que fazer essa rotina, assim que os novos elementos forem inseridos no DOM. Olhando o manual do .load do jQuery, notamos que a lib disponibiliza um callback para essa situação.

$(document).ready(function() {
		$('#content').load('lightbox.html', 
			function(){
				$('#gallery a').lightBox();
			}
		);
	});

E agora, tudo funciona

Simples, não ?

Nem tanto. Não é ‘apenas isso’, ou ‘somente isso’. A solução é simples, porém, sem toda a teoria que me levou a ela, eu não conseguiria saber que era isso que eu deveria fazer.