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 相关文章推荐
jquery.ui.progressbar 中文文档
Nov 26 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
12306验证码破解思路分享
Mar 25 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 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/10/22 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
文本加密解密
2006/06/23 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
BootStrap selectpicker
2016/06/20 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
利用python画一颗心的方法示例
2017/01/31 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
详解python实现线程安全的单例模式
2018/03/05 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
python设置环境变量的作用和实例
2019/07/09 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
博士学位自我鉴定范文
2013/12/26 职场文书
优秀教师工作感言
2014/02/16 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
收款授权委托书
2014/10/02 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
先进集体申报材料
2014/12/25 职场文书
电力安全学习心得体会
2016/01/18 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技