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里的条件判断
Feb 27 Javascript
Track Image Loading效果代码分析
Aug 13 Javascript
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
Nov 30 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
JQuery中dataGrid设置行的高度示例代码
Jan 03 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
PHP新手上路(十)
2006/10/09 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
php获取url参数方法总结
2014/11/13 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
php判断目录存在的简单方法
2019/09/26 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
python Django连接MySQL数据库做增删改查
2013/11/07 Python
下载给定网页上图片的方法
2014/02/18 Python
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
django下创建多个app并设置urls方法
2020/08/02 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
物业经理求职自我评价
2013/09/22 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
观后感开头
2015/06/19 职场文书