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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
jQuery 获取URL参数的插件
Mar 04 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
flexigrid 参数说明
2010/11/23 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
js实现简单的秒表
2020/01/16 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
电脑售后服务承诺书
2014/03/27 职场文书
灰雀教学反思
2014/04/28 职场文书
活动总结模板
2014/05/09 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
碧霞祠导游词
2015/02/09 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技