Añadir plugin de jQuery colorbox a un elemento creado de forma dinámica

Question

La forma habitual de asignar funcionalidad cuadro de color de un enlace es la siguiente:

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

elementos agregados recientemente no están obligados de esta manera sin embargo.

¿Cómo puedo agregar colorbox a los elementos

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

creados dinámicamente también?

Answer 1

El method described here es vivir-se unen al evento click en los elementos que le interesan (como .colorbox en este caso) y llamar a la función de la biblioteca colorbox en el controlador:

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

Answer 2

Usted también puede probar esto:

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

Creo que es un poco más limpio y luego usando el comando fn.

Answer 3

Esta publicación es antigua, pero esto puede ayudar a los demás: la solución simonthetwit está bien, pero deberá hacer clic en el enlace del activador dos veces. Colorbox se puede llamar directamente, por lo que debería funcionar:

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

¡Salud!

Answer 4

Estaba teniendo el mismo problema que @sunburst al tener que hacer clic en el enlace del activador dos veces. Usó el mismo código, pero .delegate() en lugar de .live(). Resolvió todo y limpió mi jQuery muy bien!

buena explicación aquí: http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

Answer 5

Como vivo se deprecia, se debe utilizar en

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

Este código también permite la agrupación.

Answer 6

Aquí fue la solución que encontré para evitar la necesidad de hacer clic dos veces en el enlace para desencadenar el evento:

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