colorbox是jquery一个非常好用的弹窗插件,功能十分丰富,使用体验也很好。NFuHTML5中文学习网 - HTML5先行者学习网
colorbox官网:http://www.jacklmoore.com/colorbox/NFuHTML5中文学习网 - HTML5先行者学习网
NFuHTML5中文学习网 - HTML5先行者学习网
刚才在是用colorbox的时候遇到了一个问题,这个问题以前没有注意过。NFuHTML5中文学习网 - HTML5先行者学习网
以前我都是讲这个插件使用在静态HTML元素中的,今天为动态生成的元素绑定的时候发现不能用了。NFuHTML5中文学习网 - HTML5先行者学习网
常规的用法是这样的:NFuHTML5中文学习网 - HTML5先行者学习网
NFuHTML5中文学习网 - HTML5先行者学习网
<a class="test" href="test.jpg" title="欢迎大家来到脚本之家">www.jb51.net</a>NFuHTML5中文学习网 - HTML5先行者学习网
NFuHTML5中文学习网 - HTML5先行者学习网NFuHTML5中文学习网 - HTML5先行者学习网
$(document).ready(function(){ NFuHTML5中文学习网 - HTML5先行者学习网
$(".test").colorbox(); NFuHTML5中文学习网 - HTML5先行者学习网
});NFuHTML5中文学习网 - HTML5先行者学习网
NFuHTML5中文学习网 - HTML5先行者学习网以上方法只适用于静态元素,如果你要为动态元素绑定colorbox效果的话,就得使用下面的这种方法了:NFuHTML5中文学习网 - HTML5先行者学习网
我们假设上面的那个html中的<a>标签是动态生成的元素,那么js就得这么写:NFuHTML5中文学习网 - HTML5先行者学习网
NFuHTML5中文学习网 - HTML5先行者学习网
$(".test).live('click',function(){NFuHTML5中文学习网 - HTML5先行者学习网
$.colorbox({href:$(this).attr('href'), open:true, height:'100%'});NFuHTML5中文学习网 - HTML5先行者学习网
return false;NFuHTML5中文学习网 - HTML5先行者学习网
});NFuHTML5中文学习网 - HTML5先行者学习网
NFuHTML5中文学习网 - HTML5先行者学习网好了,问题完美的解决了。希望对你有帮助。NFuHTML5中文学习网 - HTML5先行者学习网