Plugin jQuery em elemento criado dinamicamente com javascript – append jQuery

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

7 Comments

  1. Luis Fernando

    junho 20, 2013 at 08:57

    Perfeito Bruno, era exatamente isso que eu precisava, você me ajudou muito. Obrigado.

  2. Luiz Felipe B. Gomes

    janeiro 8, 2014 at 19:56

    cara eu tive esse problema varias vezes, mas não uso plugins jquery, apenas o jquery normal… não usei diretamente mas adaptei para o meu caso, valeu, ótimo!

  3. Parou com o blog?

  4. Perfeito Bruno, mas gostaria de averiguar se é possível analisar comigo um problema. Uso o boostrap junto com sua biblioteca de js. Seus menus e outros elementos deixo intacto, buscando apenas paginas completas por ajax. Se eu carregar as paginas e instanciar novamente os plugins para que os elementos funcionem adequadamente a pagina já existente deixa de funcionar adequadamente com os mesmo js inseridos na pagina requisitada por ajax forçando-me a dar refresh na pagina por inteira. Acaso sabe o que ocorre?

  5. tenho meu script da seguinte forma:

    // Função responsável por atualizar as frases

    function atualizar_agenda()
    {
    	
    	//alert();
    		$.ajax({
    			data: {CodLogado: , DataCons: },
    			type:'post',		//Definimos o método HTTP usado
    			dataType: 'json',	//Definimos o tipo de retorno
    			url: 'busca_agenda.php',//Definindo o arquivo onde serão buscados os dados
    			success: function(dados2){
    				$('#cont_ag').empty();
    				for(var z=0;dados2.length>z;z++){
    					//Adicionando registros retornados na tabela
    					$('#cont_ag').append(CriarCompromissos(dados2[z].hora, dados2[z].desc));
    				}
    			}
    		});
    }
     
    // Definindo intervalo que a função será chamada
    setInterval("atualizar_agenda()", 100);
     
    // Quando carregar a página
    $(function() {
    	atualizar_agenda();
    });
    
    function CriarCompromissos (hora, desc) {
    	var html = ""+hora+" - "+desc+" ";
    	return html;
    }
    
    

    meu html:

    	Agenda Diária
    	    
        

    o problema é que o Link criado no append não funciona. Clico nele e ele não faz ação alguma. Alguém sabe como posso resolver este problema?

    Obrigado,
    DIEGO GUARIZ

  6. Fala Bruno, blz? Estou com um problema similar lá no Fórum, teria como você me dar uma ajuda?
    http://forum.imasters.com.br/topic/552363-mascara-com-input-dinamico/

Deixe uma resposta

Your email address will not be published.

*