Add jQuery colorbox plugin to a dynamically created element

Question

The usual way to assign color box functionality on a link is like this:

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

Newly added items are not bound in this way though.

How can I add colorbox to dynamically created

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

elements too?

Answer 1

The method described here is to live-bind to the click event on the elements you're interested in (such as .colorbox in this instance) and call the colorbox library function in the handler:

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

Answer 2

You could also try this:

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

I think it's a little cleaner then using the fn command.

Answer 3

As live is depreciated, you should use on

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

This code also allows grouping.

Answer 4

This post is old but this may help others: simonthetwit solution is ok, but you'll need to click the trigger link twice. Colorbox can be called directly, so this should work:

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

Cheers!

Answer 5

Here was the solution I found to avoid the needing of clicking twice the link to fire the event:

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

Answer 6

I was having the same problem as @sunburst with having to click the trigger link twice. Used the same code, but .delegate() instead of .live(). Solved everything and cleaned up my jQuery nicely!

Nice explanation here: http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/