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 相关文章推荐
jquery 入门教程 [翻译] 推荐
Aug 17 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 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
一个程序下载的管理程序(二)
2006/10/09 PHP
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
php中的常用魔术方法总结
2013/08/02 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
浅谈python迭代器
2017/11/08 Python
python实现汉诺塔算法
2021/03/01 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
Python 函数返回值的示例代码
2019/03/11 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
django创建超级用户过程解析
2019/09/18 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
python定义具名元组实例操作
2021/02/28 Python
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
企业治理工作自我评价
2013/09/26 职场文书
会计毕业生自我鉴定
2013/11/04 职场文书
英文自我鉴定
2013/12/10 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python