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


Posted in Javascript onJune 20, 2014

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

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

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

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

常规的用法是这样的:

<a class="test" href="test.jpg" title="欢迎大家来到三水点靠木">3water.com</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;

});

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

Javascript 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
jQuery 表单验证扩展(三)
Oct 20 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
常用DOM整理
Jun 16 Javascript
学习jQuey中的return false
Dec 18 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 #Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 #Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 #Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 #Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 #Javascript
对之前写的jquery分页做下升级
Jun 19 #Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 #Javascript
You might like
第十五节--Zend引擎的发展
2006/11/16 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
php post换行的方法
2020/02/03 PHP
js对数字的格式化使用说明
2011/01/12 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
python爬取51job中hr的邮箱
2016/05/14 Python
Python文件和流(实例讲解)
2017/09/12 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
程序员岗位职责
2013/11/11 职场文书
农救科工作职责
2013/11/27 职场文书
学校消防安全制度
2014/01/30 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
让子弹飞观后感
2015/06/11 职场文书
离职信范文
2015/06/23 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
python中的装饰器该如何使用
2021/06/18 Python
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS