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
lightbox carregado com ajax [não funcionando]
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
lightbox carregado com ajax [ funcionando ]
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.