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 相关文章推荐
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 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获取网卡地址的代码
2008/04/09 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
python中文乱码的解决方法
2013/11/04 Python
python抓取网页图片并放到指定文件夹
2014/04/24 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
flask实现验证码并验证功能
2019/12/05 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
关于Java String的一道面试题
2013/09/29 面试题
会展策划与管理专业求职信
2014/06/09 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
安全温馨提示语大全
2015/07/14 职场文书
2019财务转正述职报告
2019/06/27 职场文书
2019销售早会主持词
2019/06/27 职场文书
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python
python 实现图片特效处理
2022/04/03 Python