Eu já postei como utilizar a função .live() do jQuery, que inclusive foi removida na nova versão da biblioteca(para usarmos o método .on() no estilo delegate), já mostrei como instanciar plugins depois de carregar um elemento com ajax.

Mas e como podemos fazer para chamar/ativar um plugin, em elementos criados dinamicamente, com o append ?

O problema – não funciona em elementos criados com append

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <link rel="stylesheet" href="colorbox.css" />

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="jquery.colorbox.js"></script>
<script>
jQuery(document).ready(function(){
  var $add = jQuery('#add'),
    $insert = jQuery('#insert');

  jQuery('a').colorbox();

  $add.on('click', function(){
    $insert.append('<a href="images/1.jpg">colorbox - nao funciona</a><br />');
  });
});
</script>
</head>
<body>
  <input type="button" name="add" id="add" value="add" />
  <div id="insert">
    <a href="images/1.jpg">colorbox</a><br />
  </div><!-- #insert -->
</body>
</html>

O motivo do colorbox só funcionar na tag </var> que já existe no documento, é pq nós atrelamos o plugin **apenas no carregamento** da página.

Logo, só funciona nos elementos que já existiam no instante em que a página terminou de carregar(evento disparado pelo dom.ready).

A solução – instanciar o plugin novamente cada vez que inserir um elemento

Então, para que o colorbox funcione nos demais elementos, precisamos atrelar o plugin nestes elementos, assim que eles forem inseridos na página, ou seja, após o append.

$add.on('click', function(){
  $insert.append('<a href="images/1.jpg">colorbox</a><br />');
  $insert.find('a').colorbox();
});

Simples assim. Note a linha abaixo do append. Estou chamando o plugin nos elementos que foram criados, logo após criar eles.

Ai sim, tudo funciona perfeitamente. O princípio é o mesmo para qualquer plugin que você quiser usar.

Código da Solução

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <link rel="stylesheet" href="colorbox.css" />

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="jquery.colorbox.js"></script>
<script>
jQuery(document).ready(function(){
  var $add = jQuery('#add'),
    $insert = jQuery('#insert');

  $add.on('click', function(){
    $insert.append('<a href="images/1.jpg">colorbox</a><br />');
    $insert.find('a').colorbox();
  });
});
</script>
</head>
<body>
  <input type="button" name="add" id="add" value="add" />
  <div id="insert">
    <a href="images/1.jpg">colorbox</a><br />
  </div><!-- #insert -->
</body>
</html>

É isso galera, comentem caso usem. =)