Question

在链接上分配颜色框功能的常用方法如下：

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

新添加的项目不会以这种方式绑定。

如何将colorbox添加到动态创建的

<a class="colorbox"></a>

元素中？

Answer 1

method described here将活动绑定到您感兴趣的元素上的click事件（例如此实例中的.colorbox）并调用颜色框库函数处理程序：

$('.colorbox').live('click', function() {
  $.colorbox({href:$(this).attr('href'), open:true});
  return false;
});

Answer 2

你也可以试试这个：

$('.colorbox').live('click',function(e){
    e.preventDefault();
    $(this).colorbox({open:true});
});

我认为使用fn命令比它更清洁。

Answer 3

由于直播已弃用，您应使用

$('body').on('click', '.colorbox', function() {
    $('.colorbox').colorbox({rel: $(this).attr('rel')});
});

此代码还允许分组。

Answer 4

这篇文章很老但这可能对其他人有所帮助： simonthetwit解决方案没问题，但您需要两次点击触发链接。 Colorbox可以直接调用，所以这应该有效：

$( '.colorbox' ).live('click',function(e){
        e.preventDefault();
        $.colorbox({open:true});
        //inline example
        //$.colorbox({inline:true, width:"50%", href:"#inline_content"});
});

干杯！

Answer 5

以下是我发现的解决方案，以避免需要点击两次链接来触发事件：

$(document.body).delegate('.<my-class>', 'click', function(e) {  
    e.preventDefault();  
    $('.<my-class>').colorbox({<my-code>})  
});

Answer 6

我遇到与@sunburst相同的问题，因为必须单击两次触发链接。使用相同的代码，但.delegate()代替.live()。解决了所有问题并很好地清理了我的jQuery！

这里有很好的解释：http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

将jQuery colorbox插件添加到动态创建的元素中

6 个答案: