Usando lightbox em página carregada com ajax

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.