Front End

29 mai, 2013

Plugin jQuery em elemento criado dinamicamente com javascript – append jQuery

Publicidade

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