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 25 Javascript
javaScript函数中执行C#代码中的函数方法总结
Aug 07 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 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
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
php Ajax乱码
2008/04/09 PHP
PHP取进制余数函数代码
2012/01/19 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
微信小程序中转义字符的处理方法
2019/03/28 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
python读取word文档的方法
2015/05/09 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
一百多行python代码实现抢票助手
2018/09/25 Python
提升Python程序性能的7个习惯
2019/04/14 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
别名指示符是什么
2012/10/08 面试题
全民健身日活动方案
2014/01/29 职场文书
工资证明格式模板
2015/06/12 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers