Colorbox : binding cbox_complete differently for multiple lightboxes

Question

I'm using "COLORBOX" (http://colorpowered.com/colorbox/).

I have two different colorboxes on the page and they are accessed as follows.

$("#link_1").live('click', function() {
  $.fn.colorbox({width:"1100px", height:"645px", inline:true, href:"#box_1"});
  return false;
});

$("#link_2").live('click', function() {
  $.fn.colorbox({width:"1100px", height:"645px", inline:true, href:"#box_2"});
  return false;
});

For each of the colorboxes, I need to do some "post processing" by binding "cbox_complete" function.

$('#link_1').bind('cbox_complete', function() {
  // something for link_1
  console.log('this happens after link_1 colorbox is opened!);
});

$('#link_2').bind('cbox_complete', function() {
  // something for link_2
  console.log('this happens after link_2 colorbox is opened!);
});

But above two "bindings" are not firing. If I do following, it works fine.

$(document).bind('cbox_complete', function() {
  // something for link_1
  console.log('this happens after link_1 AND link_2 colorbox is opened!);
});

How can I create two different "cbox_complete" bindings? I've tried

$('#link_1').live('cbox_complete', function() {.....

But this didn't have any luck either.

Answer 1

Looks like the events are only triggered globally: https://github.com/jackmoore/colorbox/blob/master/colorbox/jquery.colorbox.js#L164

How about if you do this instead?

$("#link_1").live('click', function() {
    $.fn.colorbox({
        width:"1100px", height:"645px",
        inline:true, href:"#box_1"
    }, function () {
        console.log('this happens after link_1 colorbox is opened!);
    });
});