Aggiungere plugin jQuery colorbox ad un elemento creato in modo dinamico

Question

Il solito modo per assegnare la funzionalità scatola di colore su un link è come questo:

$("a.colorbox").colorbox({ transition: "elastic" });

articoli appena aggiunti non sono vincolati in questo modo però.

Come posso aggiungere colorbox agli elementi

<a class="colorbox"></a>

creati dinamicamente?

Answer 1

Il method described here è vivere-bind all'evento click sugli elementi che vi interessano (come .colorbox in questo caso) e chiamare la funzione di libreria colorbox nel gestore:

$('.colorbox').live('click', function() { 
    $.colorbox({href:$(this).attr('href'), open:true}); 
    return false; 
}); 

Answer 2

È potrebbe anche provare questo:

$('.colorbox').live('click',function(e){ 
    e.preventDefault(); 
    $(this).colorbox({open:true}); 
}); 

Penso che sia un po 'più pulito quindi utilizzando il comando fn.

Answer 3

Questo post è vecchio, ma questo potrebbe aiutare gli altri: soluzione simonthetwit è ok, ma è necessario fare clic sul collegamento grilletto due volte. Colorbox può essere chiamato direttamente, quindi dovrebbe funzionare:

$('.colorbox').live('click',function(e){ 
     e.preventDefault(); 
     $.colorbox({open:true}); 
     //inline example 
     //$.colorbox({inline:true, width:"50%", href:"#inline_content"}); 
}); 

Cheers!

Answer 4

Stavo avendo lo stesso problema di @sunburst con dover fare clic due volte sul collegamento del trigger. Utilizzato lo stesso codice, ma .delegate() anziché .live(). Risolto tutto e ripulito bene il mio jQuery!

bella spiegazione qui: http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

Answer 5

Come vivo sono ammortizzati, si dovrebbe usare su

$('body').on('click', '.colorbox', function() { 
    $('.colorbox').colorbox({rel: $(this).attr('rel')}); 
}); 

Questo codice consente anche di raggruppamento.

Answer 6

qui era la soluzione che ho trovato per evitare il bisogno di cliccare due volte sul collegamento per generare l'evento:

$(document.body).delegate('.<my-class>', 'click', function(e) { 
    e.preventDefault(); 
    $('.<my-class>').colorbox({<my-code>}) 
});