DOMを変更した後にjQuery FancyBoxが機能しない

Question

Fancyboxを使用してイメージギャラリーにライトボックスを提供しています。

私たちはクラス 'images'を持つulを持っています。各リスト項目にはアンカータグとその内部の画像が含まれています。アンカータグには、フルサイズの画像のhrefが含まれます。

このコードは、ライトボックスを設定するために使用します。

これは私たちのプライベートラベルのほとんどでうまくいきますが、特定のスタイルがうまくいきません。働かない

スタイル（以下の通り）が真である（最初のコードブロックから）

$("#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の一部を離れてリッピングし、それを再構築するためにJavaScriptを使用して、 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で公開されています。 [画像]をクリックし、画像をクリックします。

Answer 1

私たちは結局原因を見つけました。

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\" />")); 
} 

は、それが私たちのために仕事を始めました。