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 相关文章推荐
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
vue+element-ui表格封装tag标签使用插槽
Jun 18 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集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
express.js中间件说明详解
2019/03/19 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
pymssql ntext字段调用问题解决方法
2008/12/17 Python
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
python中常用检测字符串相关函数汇总
2015/04/15 Python
Python中的条件判断语句基础学习教程
2016/02/07 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
Java中实现多态的机制
2015/08/09 面试题
几道Web/Ajax的面试题
2016/11/05 面试题
运动会致辞稿50字
2014/02/04 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
尼克胡哲观后感
2015/06/08 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
python迷宫问题深度优先遍历实例
2021/06/20 Python
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android