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

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

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

但是，新添加的项目不受此限制。

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

元素呢？

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

由于实时折旧，您应该使用

 $('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('.', 'click', function(e) { e.preventDefault(); $('.').colorbox({}) }); 

Answer 6

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

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