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

时间:2021-05-26

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

colorbox官网:http:///colorbox/


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

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

常规的用法是这样的:

复制代码 代码如下:
<a class="test" href="test.jpg" title="欢迎大家来到">www.jb51.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;
});

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章