jQuery FancyBox在改變DOM後不工作

我們使用Fancybox爲我們的圖片庫提供了一個燈箱。jQuery FancyBox在改變DOM後不工作

我們有一個類'圖像'的UL。每個列表項目都包含一個錨標記和一個圖像。定位標記包含全尺寸圖像的href。

此代碼用於設置燈箱。

<script type="text/javascript"> 
//<![CDATA[ 
    $(document).ready(function() { 
     if (!themeJSEnabled) { 
      $(".images a").fancybox({ 
       'transitionIn': 'elastic', 
       'transitionOut': 'elastic', 
       'titlePosition': 'inside', 
       'autoScale': true, 
       'centerOnScroll': true, 
       'overlayOpacity': .95, 
       'titleFromAlt': true, 
       'scrolling': 'no' 
      }); 
     } 
    }); 
//]]> 
</script>

這對大多數我們的私人標籤都適用，但是一種特殊的樣式不起作用。

不起作用的樣式使用JavaScript來撕開DOM的一部分和重建它（如下）

$("#subcontent2").before("<div class='combinedContentWrapper'></div>"); 
$("div.combinedContentWrapper").append("<div class='combinedContent'></div>"); 
$("div.combinedContent").append("<div class='sc1'></div>"); 
$("div.combinedContent").append("<div class='mc'></div>"); 
$("div.mc").append($(".maincontent").html()); 
$("div.sc1").append($(".subcontent1").html()); 
$("div.maincontent").remove(); 
$("div.subcontent1").remove(); 
$("div.mc").addClass("maincontent"); 
$("div.sc1").addClass("subcontent1");

在這種風格themeJSEnabled的主題（從第一碼塊）爲真，打完DOM與上面的代碼重構，我使用下面的代碼來註冊的fancybox：

$(".images a").fancybox({ 
     'transitionIn': 'elastic', 
     'transitionOut': 'elastic', 
     'titlePosition': 'inside', 
     'autoScale': true, 
     'centerOnScroll': true, 
     'overlayOpacity': .95, 
     'titleFromAlt': true, 
     'scrolling': 'no' 
    });

據我所知，這應該工作，因爲我的DOM被重建之前沒有登記任何東西，而fancybox應該註冊新的元素。

但是，當我第一次點擊列表中的任何圖像時，它會拋出一個JavaScript錯誤 - 't是未定義的'。這個錯誤被列爲第17行，在一個完全不相關的方法中。即使該方法被try/catch塊包圍，錯誤仍然會發生。隨後對圖像進行點擊不會產生錯誤，但不會產生任何結果。

我能做些什麼來讓Fancybox在這種情況下工作？

您可以在我們的測試服務器上看到一個示例this link。點擊'圖片'，然後點擊圖片。

來源

2011-12-22 Jeff

我的第一個猜測是你的DOM操作已經搞亂了你的HTML。你看過控制檯中的DOM元素，看看是否所有東西都放在正確的地方了嗎？我想你在改變DOM時覆蓋了部分JavaScript。雖然沒有看到演示頁面，但我不確定你將如何得到一個好的答案。 – Sparky 2011-12-22 19:57:02

@ Sparky672：DOM操作沒有改變UL或嵌套元素的HTML，並且上面列出的JavaScript運行。 – Jeff 2011-12-22 20:05:24

如果它導致錯誤，則附加Fancybox行爲。錯誤來自Fancybox代碼還是您自己的？猜測（沒有演示，看看所有這些功能在做什麼）Fancybox代碼附加在頁面加載，然後你刪除元素，打破Fancybox，並重新附加它只是造成混亂。試着弄清楚什麼叫做無關的功能，以及什麼時候。 – 2012-01-06 18:42:57

好的，我們最終找到了原因。

當我們修改DOM時，它似乎失去了對fancybox javascript的引用。

這是固定通過移動的fancybox引用頭如下：

protected void Page_Load(object sender, EventArgs e) 
{ 
    ScriptManager.RegisterClientScriptInclude(this.Page, GetType(), "fancybox1", "scripts/FancyBox/jquery.fancybox-1.3.4.pack.js"); 
    ScriptManager.RegisterClientScriptInclude(this.Page, GetType(), "fancybox2", "scripts/FancyBox/jquery.mousewheel-3.0.4.pack.js"); 
    Page.Header.Controls.Add(new LiteralControl("<link rel=\"stylesheet\" type=\"text/css\" href=\"scripts/FancyBox/jquery.fancybox-1.3.4.css\" />")); 
}

一旦我們這樣做的時候，就開始爲我們工作。

來源

2012-01-10 14:43:49 Jeff

大聲笑...我的第一個評論回到12月22日：_「我的第一個猜測是你的DOM操作已經搞砸了你的HTML。」_無論如何，很高興你知道了。 – Sparky 2012-01-14 01:10:19

jQuery FancyBox在改變DOM後不工作

回答

相關問題