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

Question

将链接赋予颜色框功能的常规方法如下：

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

但是，新增的项目不能用这种方式绑定。

How can I add colorbox to dynamically created

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

elements too?

- Jon Winstanley

Answer 1

这里描述的方法是在你感兴趣的元素（例如此处的.colorbox）上实时绑定click事件，并在处理程序中调用colorbox库函数：

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

- James Kolpack

Answer 2

您也可以尝试这个：

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

我认为这比使用 fn 命令更加简洁。

- simonthetwit

---

谢谢simonthetwit，这对我有用——使用$(this)能够向colorbox提供包含在链接中的图像信息，而sunburst的解决方案只是打开了一个未经样式化和空白的colorbox。 - Tapefreak

Answer 3

由于 live 已经过时，您应该使用 on

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

这段代码还允许进行分组。

- Alex Lomakin

Answer 4

这篇文章虽然有些陈旧，但对其他人可能会有所帮助： simonthetwit的解决方案还可以，但你需要点击触发链接两次。Colorbox可以直接调用，所以这应该可以解决问题：

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

干杯！

- sunburst

Answer 5

这是我找到的解决方案，可以避免需要点击两次链接才能触发事件：

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

- Alexandre

Answer 6

我遇到了与@sunburst相同的问题，需要单击两次触发链接。 使用相同的代码，但是使用.delegate()而不是.live()。 解决了所有问题并清理了我的jQuery！

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

- DelPiero