jquery弹窗插件colorbox绑定动态生成元素的方法_jquery

colorbox是jquery一个非常好用的弹窗插件,功能十分丰富,使用体验也很好。

colorbox官网:http://www.jacklmoore.com/colorbox/

刚才在是用colorbox的时候遇到了一个问题,这个问题以前没有注意过。

以前我都是讲这个插件使用在静态HTML元素中的,今天为动态生成的元素绑定的时候发现不能用了。

常规的用法是这样的:

复制代码 代码如下:

<a class="test" href="test.jpg" title="欢迎大家来到">www.jb51.net</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;
});

好了,问题完美的解决了。希望对你有帮助。

时间: 2024-12-21 23:55:50

jquery弹窗插件colorbox绑定动态生成元素的方法_jquery的相关文章

使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo_jquery

0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服务端压力,尤其是在大量使用二维码的系统中.Jquery.Qrcode主要包括以下参数设置: •render 定义二维码的渲染方式,有table和canvas两种渲染方式 •width 定义二维码的宽度 •height 定义二维码的高度 •text 定义二维码内容 •typeNumber 二维码的计算

jQuery EasyUI中DataGird动态生成列的方法_jquery

EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍EasyUI中DataGird动态生成列的方法. DataGird动态生成列,实际上就是控制DataGird的 columns 属性值,下面通过ajax异步调用后台columns的数据,进行绑定. <table id="dg"></table> <script>

jQuery实现获取绑定自定义事件元素的方法_jquery

本文实例讲述了jQuery实现获取绑定自定义事件元素的方法.分享给大家供大家参考,具体如下: (function ($) { // 自定义itemtab事件 $.fn.bind = function(types, data, fn) { // 重载jQuery.fn.bind方法,用来截获绑定自定义事件的元素 if(typeof types == 'string' && 'itemtab' == types) { var itemTouchStart = -1; // touchstart

jQuery中DOM树操作之复制元素的方法_jquery

本文实例讲述了jQuery中DOM树操作之复制元素的方法.分享给大家供大家参考.具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素.将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素.可是,有时候也会用到复制元素的操作.例如,可以复制出现在页面顶部的导航菜单,并把副本放到页脚上.实际上,无论何时,只要能通过复制元素增强页面的视觉效果,都是以重用代码来实现的好机会.毕竟,如果能够只编写一次代码并让jQuery替我们完成复制,何必要重写两遍同时又增加双倍的出错机会

jQuery+css3实现Ajax点击后动态删除功能的方法_jquery

本文实例讲述了jQuery+css3实现Ajax点击后动态删除功能的方法.分享给大家供大家参考.具体如下: 这里使用jquery实现ajax动态删除一个方框,并带有动画缓冲效果,在google plus网站发现的特效,在此献丑模仿了一番,已基本与Google Plusp功能相同,你可在方框中加入一些内容,jquery插件选的版本是1.6.2,更高版本也是可以的. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv

jQuery选择id属性带有点符号元素的方法_jquery

本文实例讲述了jQuery选择id属性带有点符号元素的方法.分享给大家供大家参考.具体分析如下: 如果jquery要选择的元素id中带有点符号,在选择时需要在点前面加上两个反斜杠,如: $("#address\\.street").text("Enter this field"); 具体代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content-typ

jquery.uploadify插件在chrome浏览器频繁崩溃解决方法_jquery

jquery.uploadify插件在chrome浏览器频繁崩溃问题,一直困扰了好久,网上很多人说是由于chrome缓存的原因,插件初始化时,需要引用js,而chrome的缓存导致没有没有请求到jquery.uploadify-3.1_min.js,所以引起崩溃,可以在引用js时,加入随机数:<script type="text/javascript" src="/js/jquery.uploadify-3.1_min.js?ver=<?php echo rand

JQuery Highcharts 动态生成图表的方法_jquery

复制代码 代码如下: $(function () { $(document).ready(function() { Highcharts.setOptions({ global: { useUTC: false } }); var chart; $('#container').highcharts({ chart: { type: 'spline', animation: Highcharts.svg, // don't animate in old IE marginRight: 10, ev

jquery移除、绑定、触发元素事件使用示例详解

 这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下  代码如下: unbind(type [,data])     //data是要移除的函数 $('#btn').unbind("click"); //移除click $('#btn').unbind(); //移除所有     对于只需要触发一次的,随后就要立即解除绑定的情况,用one()    代码如下: $('#btn').one("click",function(){.