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!);
    });
});

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

2 个答案: