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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
javascript实现控制div颜色
Jul 07 Javascript
js实现汉字排序的方法
Jul 23 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 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 array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
php摘要生成函数(无乱码)
2012/02/04 PHP
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
Python操作CouchDB数据库简单示例
2015/03/10 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
Python字典简介以及用法详解
2016/11/15 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
关于元旦的广播稿2016
2015/12/17 职场文书
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python