jquery彈窗插件colorbox綁定動態(tài)生成元素的方法
更新時間：2014年06月20日 08:59:12 投稿：junjie
這篇文章主要介紹了jquery彈窗插件colorbox綁定動態(tài)生成元素的方法,colorbox是一款非常好用的彈窗插件,需要的朋友可以參考下
colorbox是jquery一個非常好用的彈窗插件，功能十分豐富，使用體驗也很好。
colorbox官網：http://www.jacklmoore.com/colorbox/
剛才在是用colorbox的時候遇到了一個問題，這個問題以前沒有注意過。
以前我都是講這個插件使用在靜態(tài)HTML元素中的，今天為動態(tài)生成的元素綁定的時候發(fā)現不能用了。
常規(guī)的用法是這樣的：
復制代碼 代碼如下:
<a class="test" href="test.jpg" title="歡迎大家來到腳本之家">chabaoo.cn</a>
復制代碼 代碼如下:
$(document).ready(function(){
$(".test").colorbox();
});
以上方法只適用于靜態(tài)元素，如果你要為動態(tài)元素綁定colorbox效果的話，就得使用下面的這種方法了：
我們假設上面的那個html中的<a>標簽是動態(tài)生成的元素，那么js就得這么寫：
復制代碼 代碼如下:
$(".test).live('click',function(){
$.colorbox({href:$(this).attr('href'), open:true, height:'100%'});
return false;
});
好了，問題完美的解決了。希望對你有幫助。
您可能感興趣的文章:
- Json2Template.js 基于jquery的插件 綁定JavaScript對象到Html模板中
- 一個可綁定數據源的jQuery數據表格插件
- Angular指令封裝jQuery日期時間插件datetimepicker實現雙向綁定示例
- Jquery 模板數據綁定插件的使用方法詳解
- Vue.js列表渲染綁定jQuery插件的正確姿勢
- jQuery給動態(tài)添加的元素綁定事件的方法
- jquery移除、綁定、觸發(fā)元素事件使用示例詳解
- JQuery中綁定事件（bind()）和移除事件（unbind()）
- jQuery事件的綁定、觸發(fā)、及監(jiān)聽方法簡單說明
- jQuery事件綁定和委托實例
- jQuery事件綁定on()、bind()與delegate() 方法詳解
- jquery 插件重新綁定的處理方法分析
相關文章
Jquery on方法綁定事件后執(zhí)行多次的解決方法
下面小編就為大家?guī)硪黄狫query on方法綁定事件后執(zhí)行多次的解決方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
jquery 將disabled的元素置為enabled的三種方法
在jquery中可以通過jqueryObj.attr("disabled","disabled")將頁面中某個元素置為不可編輯或觸發(fā)狀態(tài)，但是在jquery的API reference中并沒說明怎么將頁面置為disable的元素重新置為可觸發(fā)或可編輯的。2009-07-07
這篇文章主要介紹了jQuery實現的選擇商品飛入文本框動畫效果,結合完整實例形式分析了jQuery動態(tài)操作頁面元素屬性實現動畫效果的方法,涉及jQuery的事件綁定、元素遍歷及屬性操作等相關技巧,需要的朋友可以參考下2016-08-08
js之ActiveX控件使用說明 new ActiveXObject()
ActiveX 控件廣泛用于Internet。它們可以通過提供視頻、動畫內容等來增加瀏覽的樂趣。不過，這些程序可能出問題或者向您提供不需要的內容2014-03-03
jQuery動態(tài)添加刪除select項(實現代碼)
以下是對jQuery動態(tài)添加刪除select項的實現代碼進行了詳細的分析介紹，需要的朋友可以過來參考下2013-09-09
這篇文章主要介紹了jQuery 同時獲取多個標簽的指定內容并儲存為數組的相關知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
這篇文章主要為大家詳細介紹了jquery組件WebUploader文件上傳用法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家詳細介紹了jquery圖片預覽插件的實現方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了使用jQuery仿蘋果官網焦點圖特效,非常的炫酷，需要的朋友可以參考下2014-12-12
本篇文章分享了如何實現文字無縫向上翻動效果的示例代碼。代碼清晰明了，可直接下載使用。有興趣的朋友可以看下2016-12-12