Add jQuery colorbox plugin to a dynamically created element

Question

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

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

Newly added itmes 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() {
  $.fn.colorbox({href:$(this).attr('href'), open:true});
  return false;
}

Answer 2

Try bind event http://api.jquery.com/bind/ ??

Answer 3

That works fine, but i clicked for second time, it doesn't work.

When i try to click for second time an error displays: $.fn.colorbox is not a function.

How can i correct that error?? I'm using the code above.