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 相关文章推荐
深入理解Javascript闭包 新手版
Dec 28 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
jQuery返回定位插件详解
May 15 jQuery
详解使用WebPack搭建React开发环境
Aug 06 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
AngularJS折叠菜单实现方法示例
2017/05/18 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
node内置调试方法总结
2018/02/22 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python实用日期时间处理方法汇总
2015/05/09 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
游戏商店:Eneba
2020/04/25 全球购物
社区文化建设方案
2014/05/02 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
端午节活动总结
2014/08/26 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
师范生小学见习总结
2015/06/23 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript