Question

这是一个＆＃39; hack＆＃39;这使得colorbox jQuery plugin能够使用jQuery live和rel属性（因此您可以将图像分组到灯箱中）：

 $('a[rel="group1"]').live('click', function(){ 
    $('a[rel="group1"]:not(.cboxElement)').colorbox(); 
    return false; 
  }).colorbox();

现在，问题是灯箱只会在您第二次点击时出现。

所以我想我可以自动触发第二次点击（在第一次完成事件之后）。

有任何建议可以实现这一目标吗？

修改

我在Google上搜索了如何使用jQuery live和colorbox并找到了this。

然后我意识到它不适用于图像组。

然后我发现了这个hack，但需要再次点击。

动态生成HTML：

$('#menu-item-27052').append("<a rel='group1' href='images/orion_beer.jpg'>test</a>")
$('#menu-item-27052').append("<a rel='group1' href='images/dish2.jpg'>test 2</a>")

Answer 1

你可以调用$(this).trigger('click', false)，false将一个参数传递给事件处理程序，你可以检查它是否存在，这样你就不会运行无限循环：

$('a[rel="group1"]').live('click', function(event, reTrigger){
    $('a[rel="group1"]:not(.cboxElement)').colorbox();
    if (typeof(reTrigger) == 'undefined' || reTrigger == false) {
        $(this).trigger('click', false);
    }
    return false; 
}).colorbox();

我不确定你在做什么，但这似乎是一个奇怪的解决方法。也许你的代码可以用不同的方式调用colorbox插件。

也许您应该在元素上添加.colorbox()，因为它们被添加到DOM中，所以当它们被点击时，它已经设置好并准备好了。

更新

$('#menu-item-27052').append("<a rel='group1' href='images/orion_beer.jpg'>test</a>");
$('#menu-item-27052').append("<a rel='group1' href='images/dish2.jpg'>test 2</a>");
$('.group1').colorbox();

在元素添加到DOM后，只需调用元素上的.colorbox()函数即可。如果Colorbox插件有一个“destroy”方法来删除实例，那么你应该首先调用它：

$('#menu-item-27052').append("<a rel='group1' href='images/orion_beer.jpg'>test</a>");
$('#menu-item-27052').append("<a rel='group1' href='images/dish2.jpg'>test 2</a>");
$('.group1').colorbox.remove().colorbox();

在旁注上你应该编写一个字符串并一次追加所有DOM元素，如果你使用.append()一堆，它将减慢代码的执行速度：

$('#menu-item-27052').append("<a rel='group1' href='images/orion_beer.jpg'>test</a><a rel='group1' href='images/dish2.jpg'>test 2</a>");
$('.group1').colorbox.remove().colorbox();

在第一次单击事件事件完成后触发第二次单击？

1 个答案:

更新