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. =)