jquery弹窗插件colorbox绑定动态生成元素的方法

前端技术 2023/09/03 JavaScript

colorbox是jquery一个非常好用的弹窗插件，功能十分丰富，使用体验也很好。

colorbox官网：http://www.jacklmoore.com/colorbox/


刚才在是用colorbox的时候遇到了一个问题，这个问题以前没有注意过。

以前我都是讲这个插件使用在静态HTML元素中的，今天为动态生成的元素绑定的时候发现不能用了。

常规的用法是这样的：

复制代码 代码如下:

<a class=\"test\" href=\"test.jpg\" title=\"欢迎大家来到phpstudy\">www.phpstudy.net</a>

复制代码 代码如下:

$(document).ready(function(){   
    $(\".test\").colorbox();  
});

以上方法只适用于静态元素，如果你要为动态元素绑定colorbox效果的话，就得使用下面的这种方法了：

我们假设上面的那个html中的<a>标签是动态生成的元素，那么js就得这么写：

复制代码 代码如下:

$(\".test).live(\'click\',function(){
    $.colorbox({href:$(this).attr(\'href\'), open:true, height:\'100%\'});
    return false;
});

好了，问题完美的解决了。希望对你有帮助。

本文地址：https://www.stayed.cn/item/7501

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案