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

Question

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

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

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

如何将颜色框添加到动态创建的

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

elements too?

Answer 1

此处介绍的方法 是实时绑定到您感兴趣的元素上的 click 事件（例如本例中的 .colorbox）并调用 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

由于 live 已被折旧，您应该使用 on

$('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/