jquery彈窗插件colorbox綁定動(dòng)態(tài)生成元素的方法

更新時(shí)間：2014年06月20日 08:59:12 投稿：junjie

這篇文章主要介紹了jquery彈窗插件colorbox綁定動(dòng)態(tài)生成元素的方法,colorbox是一款非常好用的彈窗插件,需要的朋友可以參考下

colorbox是jquery一個(gè)非常好用的彈窗插件，功能十分豐富，使用體驗(yàn)也很好。

colorbox官網(wǎng)：http://www.jacklmoore.com/colorbox/

剛才在是用colorbox的時(shí)候遇到了一個(gè)問(wèn)題，這個(gè)問(wèn)題以前沒(méi)有注意過(guò)。

以前我都是講這個(gè)插件使用在靜態(tài)HTML元素中的，今天為動(dòng)態(tài)生成的元素綁定的時(shí)候發(fā)現(xiàn)不能用了。

常規(guī)的用法是這樣的：

<a class="test" href="test.jpg" title="歡迎大家來(lái)到腳本之家">www.dhdzp.com</a>

復(fù)制代碼代碼如下:

$(document).ready(function(){    

    $(".test").colorbox();  

});

以上方法只適用于靜態(tài)元素，如果你要為動(dòng)態(tài)元素綁定colorbox效果的話，就得使用下面的這種方法了：

我們假設(shè)上面的那個(gè)html中的<a>標(biāo)簽是動(dòng)態(tài)生成的元素，那么js就得這么寫(xiě)：

復(fù)制代碼代碼如下:

$(".test).live('click',function(){

    $.colorbox({href:$(this).attr('href'), open:true, height:'100%'});

    return false;

});

好了，問(wèn)題完美的解決了。希望對(duì)你有幫助。

您可能感興趣的文章:

相關(guān)文章

jquery-tips懸浮提示插件分享
Tooltip（提示框）是一種常見(jiàn)的效果，它通常用在需要進(jìn)一步解釋、說(shuō)明或提示的某個(gè)詞上。這種小效果實(shí)現(xiàn)起來(lái)雖然不難，但如果你想不勞而獲，可以試試 Tips。
2015-07-07
jQuery常見(jiàn)的遍歷DOM操作詳解
這篇文章主要介紹了jQuery常見(jiàn)的遍歷DOM操作,結(jié)合實(shí)例形式詳細(xì)分析了針對(duì)DOM節(jié)點(diǎn)的parent()、parents()、parentsUntil()、find()、eq()、filter()等各種遍歷操作相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下
2018-09-09
jtable列中自定義button示例代碼
本文將為大家介紹下在jtable列中如何自定義button，下面有一個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下
2013-11-11
基于jQuery實(shí)現(xiàn)仿QQ空間送禮物功能代碼
qq空間的一份虛擬禮物可能會(huì)讓很久不曾相見(jiàn)的朋友拉近一些距離。那么基于jquery代碼是如何實(shí)現(xiàn)此功能的呢？下面腳本之家小編給大家分享基于jQuery實(shí)現(xiàn)仿QQ空間送禮物功能代碼，一起看看吧
2016-05-05
jQuery層次選擇器選擇元素使用介紹
層次選擇器:通過(guò)DOM元素間的層次關(guān)系獲取元素，其主要的層次關(guān)系包括后代、父子、相鄰、兄弟關(guān)系，通過(guò)其中基類關(guān)系可以方便快捷地定位元素，感興趣的朋友可以了解下
2013-04-04
jQuery輪播圖功能實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了jQuery輪播圖功能實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
jquery 實(shí)現(xiàn)的全選和反選
jquery 全選實(shí)現(xiàn)代碼。
2009-04-04
jQuery中Form相關(guān)知識(shí)匯總
這篇文章主要介紹了jQuery中Form相關(guān)知識(shí)匯總,總結(jié)的十分全面，需要的朋友可以參考下
2015-01-01
window.open不被攔截的實(shí)現(xiàn)代碼
打開(kāi)空白新窗口，再給新窗口的localtion賦值，需要的朋友可以參考下
2012-08-08
jquery+ajax實(shí)現(xiàn)上傳圖片并顯示上傳進(jìn)度功能【附php后臺(tái)接收】
這篇文章主要介紹了jquery+ajax實(shí)現(xiàn)上傳圖片并顯示上傳進(jìn)度功能,結(jié)合實(shí)例形式分析了jQuery+ajax結(jié)合layer.js插件與php后臺(tái)交互,實(shí)現(xiàn)顯示上傳進(jìn)度的相關(guān)操作技巧,需要的朋友可以參考下
2019-06-06