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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
理解javascript回调函数
Dec 28 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
vxe-table vue table 表格组件功能
May 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
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
php查询ip所在地的方法
2014/12/05 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Python人脸识别初探
2017/12/21 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
中层干部岗位职责
2013/12/18 职场文书
养殖人员的创业计划书范文
2013/12/26 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
门诊手术室工作制度
2014/01/30 职场文书
学校万圣节活动方案
2014/02/13 职场文书
仓库统计员岗位职责
2015/04/14 职场文书