jquery彈窗插件colorbox綁定動態(tài)生成元素的方法
更新時間：2014年06月20日 08:59:12 投稿：junjie
這篇文章主要介紹了jquery彈窗插件colorbox綁定動態(tài)生成元素的方法,colorbox是一款非常好用的彈窗插件,需要的朋友可以參考下
colorbox是jquery一個非常好用的彈窗插件，功能十分豐富，使用體驗(yàn)也很好。
colorbox官網(wǎng)：http://www.jacklmoore.com/colorbox/
剛才在是用colorbox的時候遇到了一個問題，這個問題以前沒有注意過。
以前我都是講這個插件使用在靜態(tài)HTML元素中的，今天為動態(tài)生成的元素綁定的時候發(fā)現(xiàn)不能用了。
常規(guī)的用法是這樣的：
復(fù)制代碼 代碼如下:
<a class="test" href="test.jpg" title="歡迎大家來到腳本之家">m.fzitv.net</a>
復(fù)制代碼 代碼如下:
$(document).ready(function(){
$(".test").colorbox();
});
以上方法只適用于靜態(tài)元素，如果你要為動態(tài)元素綁定colorbox效果的話，就得使用下面的這種方法了：
我們假設(shè)上面的那個html中的<a>標(biāo)簽是動態(tài)生成的元素，那么js就得這么寫：
復(fù)制代碼 代碼如下:
$(".test).live('click',function(){
$.colorbox({href:$(this).attr('href'), open:true, height:'100%'});
return false;
});
好了，問題完美的解決了。希望對你有幫助。
您可能感興趣的文章:
- Json2Template.js 基于jquery的插件 綁定JavaScript對象到Html模板中
- 一個可綁定數(shù)據(jù)源的jQuery數(shù)據(jù)表格插件
- Angular指令封裝jQuery日期時間插件datetimepicker實(shí)現(xiàn)雙向綁定示例
- Jquery 模板數(shù)據(jù)綁定插件的使用方法詳解
- Vue.js列表渲染綁定jQuery插件的正確姿勢
- jQuery給動態(tài)添加的元素綁定事件的方法
- jquery移除、綁定、觸發(fā)元素事件使用示例詳解
- JQuery中綁定事件（bind()）和移除事件（unbind()）
- jQuery事件的綁定、觸發(fā)、及監(jiān)聽方法簡單說明
- jQuery事件綁定和委托實(shí)例
- jQuery事件綁定on()、bind()與delegate() 方法詳解
- jquery 插件重新綁定的處理方法分析
相關(guān)文章
Tooltip（提示框）是一種常見的效果，它通常用在需要進(jìn)一步解釋、說明或提示的某個詞上。這種小效果實(shí)現(xiàn)起來雖然不難，但如果你想不勞而獲，可以試試 Tips。2015-07-07
這篇文章主要介紹了jQuery常見的遍歷DOM操作,結(jié)合實(shí)例形式詳細(xì)分析了針對DOM節(jié)點(diǎn)的parent()、parents()、parentsUntil()、find()、eq()、filter()等各種遍歷操作相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下2018-09-09
本文將為大家介紹下在jtable列中如何自定義button，下面有一個不錯的示例，感興趣的朋友可以參考下2013-11-11
基于jQuery實(shí)現(xiàn)仿QQ空間送禮物功能代碼
qq空間的一份虛擬禮物可能會讓很久不曾相見的朋友拉近一些距離。那么基于jquery代碼是如何實(shí)現(xiàn)此功能的呢？下面腳本之家小編給大家分享基于jQuery實(shí)現(xiàn)仿QQ空間送禮物功能代碼，一起看看吧2016-05-05
層次選擇器:通過DOM元素間的層次關(guān)系獲取元素，其主要的層次關(guān)系包括后代、父子、相鄰、兄弟關(guān)系，通過其中基類關(guān)系可以方便快捷地定位元素，感興趣的朋友可以了解下2013-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery輪播圖功能實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
jquery 全選實(shí)現(xiàn)代碼。2009-04-04
這篇文章主要介紹了jQuery中Form相關(guān)知識匯總,總結(jié)的十分全面，需要的朋友可以參考下2015-01-01
window.open不被攔截的實(shí)現(xiàn)代碼
打開空白新窗口，再給新窗口的localtion賦值，需要的朋友可以參考下2012-08-08
jquery+ajax實(shí)現(xiàn)上傳圖片并顯示上傳進(jìn)度功能【附php后臺接收】
這篇文章主要介紹了jquery+ajax實(shí)現(xiàn)上傳圖片并顯示上傳進(jìn)度功能,結(jié)合實(shí)例形式分析了jQuery+ajax結(jié)合layer.js插件與php后臺交互,實(shí)現(xiàn)顯示上傳進(jìn)度的相關(guān)操作技巧,需要的朋友可以參考下2019-06-06