DIVリロード後にJQuery Fancyboxが動作しない

Question

私のサイトでFancyboxを使って他のページ（外部ページ）へのリンクを開きます。

基本的にユーザーが画像をクリックすると、外部ページを含むfancyboxが開きます。イメージリンクは、別のページ（親）上のDIV内に表示されるページ（子）内に含まれます。親は、画像とリンクを変更させるさまざまなパラメータを持つ子ページを再ロードすることによって、DIVのデータをリロードする機能を備えています。

これはすべて最初の負荷で完全に機能します。しかし、DIVが異なるデータを含む子ページで再ロードされた後で、fancyboxポップアップはもはや機能しません。私はその後、ページ上でF5の更新を行う場合、それは再び動作します。しかし、最初の負荷でのみ。

イメージリンクのセットアップfancyboxに子ページのコード：

$.noConflict(); 
$(document).ready(function() { 
    $(".userdetailslink").fancybox({ 
     'width'    : '80%', 
     'height'   : '80%', 
     'autoScale'   : false, 
     'transitionIn'  : 'elastic', 
     'transitionOut'  : 'elastic', 
     'type'    : 'iframe' 
    }); 
}); 

私も同じ結果で、次の試してみた：

$.noConflict(); 
$(".userdetailslink").ready(function() { 
    $(".userdetailslink").fancybox({ 
     'width'    : '80%', 
     'height'   : '80%', 
     'autoScale'   : false, 
     'transitionIn'  : 'elastic', 
     'transitionOut'  : 'elastic', 
     'type'    : 'iframe' 
    }); 
}); 

任意の助けをいただければ幸いですが。

Answer 1

divをロードするのにAJAXメソッドを使用していますか？コールバック関数を使用して、ロードされたコンテンツにイベント処理を適用できます。

$("div").load("url", function(){ 
     $(".userdetailslink").fancybox({ 
    'width'    : '80%', 
    'height'   : '80%', 
    'autoScale'   : false, 
    'transitionIn'  : 'elastic', 
    'transitionOut'  : 'elastic', 
    'type'    : 'iframe' 
    }); 

}); 

このように、ロード後も実行されます。もちろん、あなたは初期ロードをします。