的fancybox，得到的fancybox使用LIVE綁定（）項被加載到頁面加載

後，我有一個頁面，加載和加載後，它拉在LIS的列表來填充新聞提要。的fancybox，得到的fancybox使用LIVE綁定（）項被加載到頁面加載

<li><a href="/url/" class="quickview">quick view</a></li> 
<li><a href="/url/" class="quickview">quick view</a></li> 
<li><a href="/url/" class="quickview">quick view</a></li>

我試圖讓用戶點擊快速查看但沒有任何運氣的時候觸發一個花式框。有任何想法嗎？

$(document).ready(function() { 
    $('.quickview').fancybox(); 
});

也試過：

$(document).ready(function() { 
    $('a.quickview').live('click', function() { 
     $(this).fancybox(); 
    }); 
});

http://fancybox.net/

感謝您的任何想法...

來源

2010-03-28 AnApprentice

個

的問題是重視的fancybox到AJAX加載的元素，對不對？

我有同樣的問題，我發現this solution。

我複製粘貼到此處，詳情參見原始bug報告：

$.fn.fancybox = function(options) { 

$(this) 
    .die('click.fb') 
    .live('click.fb', function(e) {  
    $(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {}))) 
    e.preventDefault(); 
    [...]

幸得jeff.gran。

來源

2010-09-07 00:04:01

該解決方案爲我打破了常規照片畫廊，但我能夠解決它，因爲我在這裏評論：http://code.google.com/p/fancybox/issues/detail?id=18#c47 – Sonny 2011-07-21 19:53:52

從我的理解Fancybox，調用fancybox()簡單的附加插件的選擇元件。在click事件上調用fancybox不會打開任何內容。

我想你只需要

$(li_element_that_you_create).fancybox();

添加到創建你的列表中的新元素LI

編輯

如果您使用load，那麼你的代碼會做這樣的事情：

$('#ul_id_goes_here').load('source/of/news.feed', function() { 
    $('.quickview').fancybox(); 
});

來源

2010-03-28 16:07:30 Dancrumb

我不遵循，我正在使用JQUERY負載？ – AnApprentice 2010-03-28 17:03:54

這應該每Ajax請求

$(document).ajaxStop(function() { 
    $("#whatever").fancybox(); 
});

來源

2011-02-17 15:08:38 mononym

這是一個很多解決方案更好live（）是一件好事，可以避免。 – Evert 2011-12-20 12:01:14

老問題後工作，但可能是未來搜索有用。

我的優選解決方案是從現場直播內手動觸發的fancybox，例如：

$('.lightbox').live('click', function() { 
    $this = $(this); 
    $.fancybox({ 
     height: '100%', 
     href: $this.attr('href'), 
     type: 'iframe', 
     width: '100%' 
    }); 
    return false; 
});

編輯：從jQuery的1.7活（）已過時，對（）應被代替使用。有關更多信息，請參閱http://api.jquery.com/live/。

來源

2011-10-12 13:56:27 Steve

100％喜歡這個解決方案感謝您花時間提供它。 – 2011-11-19 17:44:21

你可以用這種方式「圖庫」功能嗎？（下一頁/上一頁鏈接） – Mirko 2012-01-05 14:41:13

這是我的首選解決方案，它的功能非常好...好工作 – 2012-02-20 20:26:22

由於.on現在更推薦.live，閱讀過documentation on delegated events後，這裏是我想出了一個解決方案（假設你的元素有一個類的「觸發模式」）：

$(document).on('click', '.trigger-modal', function() { 
    // remove the class to ensure this will only run once 
    $(this).removeClass('trigger-modal'); 
    // now attach fancybox and click to open it 
    $(this).fancybox().click(); 
    // prevent default action 
    return false; 
});

來源

2013-02-11 23:01:32 mltsy

甚至只是'$（document）.on（'click'，' .trigger-modal'，function（）{$ .fancybox（）; return false;}）;' – ChrisV 2013-10-17 08:05:40

的fancybox，得到的fancybox使用LIVE綁定（）項被加載到頁面加載

回答

相關問題