Fancybox正在花2點擊打開動態加載的內容

使用JQuery，我從外部HTML頁面加載div到fancybox中，並使用變量構建鏈接。它需要兩次點擊來打開它。第一，我相信，只是啓動它。但我不知道如何解決它。有沒有更好的方法來做到這一點？Fancybox正在花2點擊打開動態加載的內容

的HTML是在這裏：

<a class="BannerVideoAwesome fancybox" id="series900" border="0" href="/mkting/Videos/Speakers.html"><img src="/images/titles/CM/series-speakers-video.jpg" border="0" align="left" /></a>

jQuery的是在這裏：

$('a.BannerVideoAwesome').live('click', function(e){ 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    var grabVid = '#' + $(this).attr('id'); 
    vidObject = url + grabVid; 
    var vidContents = vidObject.html(); 
    alert(vidContents); 
    $.fancybox({ 
      //'href': url, 
      'content':'vidContents' 
        });

非常感謝你提前爲任何幫助，有人可以給我。我一直在爲此掙扎好幾天。

來源

2011-11-14 codeNameLily

是在所有瀏覽器出現這種情況？ –

這有幫助嗎？ http://stackoverflow.com/questions/6510194/why-does-fancybox-require-two-clicks-activate –

我認爲您的文章的標題有點誤導。無論如何，如果我理解正確，你只是想從外部html文件加載部分內容（DIV）到fancybox。在您的例子中，文件episodeSpeakers.html包含ID =「series900」

<div id="series900">selected content</div>

一個DIV如果上面的是正確的，那麼你就需要使用jQuery的生活（），但結合的fancybox的單擊（）並使用ajax和dataFilter選擇內容。

在相同的HTML，這個腳本應該做的伎倆：

$("a.BannerVideoAwesome").click(function() { 
var grabVid = "#"+$(this).attr('id'); 
$.fancybox(this,{ 
'type': 'ajax', 
'ajax': { 
    dataFilter: function(data) { 
    var vidContents = $(data); 
    vidContents = $(grabVid, vidContents); 
    return(vidContents); 
    } // datafilter 
} // ajax 
}); // fancybox 
return false; 
}); //click

，或者您可以使用

$("a.BannerVideoAwesome").click(function(event) { 
event.preventDefault(); 
. 
.

，而不是

return false;

重要：由於一些跨瀏覽器問題，請勿使用上面的dataFilter解決方案。最好使用fancybox的內聯方法，將部分內容（從外部html文件中）添加到調用html文檔中的隱藏DIV中，然後將其從此處移動到fancybox中。它需要（當然）添加這樣的DIV。例如： -

<div style="display: none;"> 
<div id="fancyContent"></div> 
</div>

然後使用這個腳本：

$("a.BannerVideoAwesome").click(function() { 
var grabVid = "#"+$(this).attr('id'); 
$.ajax({ 
type: "GET", // default 
dataType: "html",  
cache: false,      
url: this.href, 
success: function (data) { 
    $("#fancyContent").html(grabVid ? $("<div>").append(data).find(grabVid) : data); 
    $.fancybox({ 
    'href': "#fancyContent", 
    'onCleanup': function() { 
    var fancyContent = this.href; 
    $(fancyContent).unwrap().empty(); 
    } // onCleanup 
    }); // fancybox 
} // success 
}); //ajax 
return false; 
}); //click

，在大多數瀏覽器上運行。順便說一句，在onCleanup選項修復this bug

來源

2011-11-20 08:27:22 JFK

事實證明，我認爲我遇到的問題與我加載到fancybox中的內容有關，後者是來自Limelight的視頻播放器。最後我開始在頁面加載播放器，然後打開的fancybox直到這個代碼： $（「a.BannerVideoAwesome」）生活（「點擊」，函數（EV）{ \t ev.preventDefault（）; \t VAR grabVid = '＃' + $（本）.attr（「ID」）; \t //警報（grabVid）; \t $ .fancybox（此，{ \t \t \t \t \t '類型'：「AJAX 」， 'AJAX'：{dataFilter：功能（數據）{ \t \t 返回$（數據）.filter（grabVid）[0]} \t} }）; }）; – codeNameLily

我測試過dataFilter，它在所有瀏覽器中都無法正常工作。如果我是你，我會在不同的瀏覽器上測試代碼，如果你想要真正的跨瀏覽器兼容性的話。 – JFK

試着從改爲點擊事件到鼠標懸停。

$('a.BannerVideoAwesome').live('mouseover', function(e){ 
...

來源

2011-11-17 14:31:09

爲什麼/如何工作？它解決了我的問題，謝謝！ –

正常情況下，只要元素被加載，fancybox就會工作。在你的情況下，你只是在點擊後纔將fancybox分配給元素，這意味着你必須再次點擊元素才能啓動fancybox，然後在第一次點擊中分配元素。所以你需要在點擊一個元素之前分配它，在這種情況下，鼠標懸停會在點擊之前生效。 –

$('a.BannerVideoAwesome').live('click', function (event) { 
    $.fancybox(this,{ 
     'autoDimensions': true, 
     'autoScale': true, 
     'transitionIn': 'none', 
     'transitionOut': 'none', 
     'type': 'ajax', 
     'padding': 0 
    }); 
    event.preventDefault(); 
});

來源

2012-09-22 19:56:58

Fancybox正在花2點擊打開動態加載的內容

回答

相關問題