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

【问题标题】：Add jQuery colorbox plugin to a dynamically created element将 jQuery colorbox 插件添加到动态创建的元素
【发布时间】：2010-03-14 19:43:58
【问题描述】：

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

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

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

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

&lt;a class="colorbox"&gt;&lt;/a&gt;

元素中？

【问题讨论】：

标签： jquery anchor colorbox

【解决方案1】：

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

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

【讨论】：

谢谢，这正是我想要的！

【解决方案2】：

你也可以试试这个：

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

我认为使用fn 命令会更简洁一些。

【讨论】：

谢谢 simonthetwit，这对我有用 - 使用 $(this) 能够为颜色框提供链接中包含的图像信息，而 sunburst 的解决方案只是打开了一个无样式且空的颜色框。跨度>

【解决方案3】：

由于 live 已贬值，您应该使用 on

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

此代码还允许分组。

【讨论】：

【解决方案4】：

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

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

干杯！

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

【讨论】：