Plugin jQuery em elemento criado dinamicamente com javascript – append jQuery

pluginjqueryelemdinajavascript_topo

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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.

1
2
3
4
$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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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. =)

Fonte: iMasters

Postagens Relacionadas