Colorbox ：针对多个灯箱以不同方式绑定 cbox_complete

Question

我正在使用“COLORBOX”（http://colorpowered.com/colorbox/）。

我的页面上有两个不同的颜色框，它们的访问方式如下。

$("#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;
});

对于每个颜色框，我需要通过绑定“cbox_complete”函数进行一些“后处理”。

$('#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!);
});

但以上两个“绑定”没有触发。如果我遵循，效果很好。

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

如何创建两个不同的“cbox_complete”绑定？我已经尝试过

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

但这也没有任何运气。

Answer 1

使用 onComplete 回调来进行链接特定的回调。

Answer 2

看起来这些事件仅在全局范围内触发： https:// github.com/jackmoore/colorbox/blob/master/colorbox/jquery.colorbox.js#L164

如果你这样做怎么样？

$("#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!);
    });
});