Eu já mostrei 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 <a> que já existe no documento, é porque 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 criá-los. Agora 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. =)
De 0 a 10, o quanto você recomendaria este artigo para um amigo?