AJAXコンテンツの中からcolorboxをロードしています

Question

まず、すべての形式のjavascript、特にリモートでAJAXを使用するのは初めてです。つまり、最終日には、1つのdivを動的にリフレッシュし、別のページのdivの内容で置き換えるスクリプトを作成することができました。

問題は、しかし、私の他のスクリプトのいくつかは、Ajaxのリフレッシュコンテンツでは動作しないということです。最も重要なのは「カラーボックス」です。

私はこの夜に数時間を研究しており、.load、.live ...に関する最新情報を見ています。リフレッシュなどでDOMを更新しています...しかし、かなり正直なところです現在のところ私の頭の上に行くと、私は現在持っているコードとの統合の点でどこを開始するのか分からないだろう。

私のアヤックスは、コードを更新し、次のように（私の謝罪、私はベストプラクティスを使用していない場合、それは私の最初の試みであった）である： - 私は、誰かが親切に私のショーにあるかもしれない期待していた

$(function() { 

$(".artist li.artist").removeClass("artist").addClass("current_page_item"); 
$("#rightcolumnwrapper").append("<img src='http://www.mywebsite.com/wp-content/images/ajax-loader.gif' id='ajax-loader' style='position:absolute;top:400px;left:190px;right:0px;margin-left:auto;margin-right:auto;width:100px;' />"); 

var $rightcolumn = $("#rightcolumn"),  
    siteURL = "http://" + top.location.host.toString(),  
    hash = window.location.hash, 
    $ajaxSpinner = $("#ajax-loader"), 
    $el, $allLinks = $("a"); 
      $ajaxSpinner.hide(); 


$('a:urlInternal').live('click', function(e) { 
    $el = $(this); 
    if ((!$el.hasClass("comment-reply-link")) && ($el.attr("id") != 'cancel-comment-reply-link')) {   
     var path = $(this).attr('href').replace(siteURL, ''); 
     $.address.value(path); 
     $(".current_page_item").removeClass("current_page_item"); 
     $allLinks.removeClass("current_link"); 
     $el.addClass("current_link").parent().addClass("current_page_item"); 
     return false; 
    } 

    e.preventDefault(); 

}); 

$.address.change(function(event) {  
    $ajaxSpinner.fadeIn(); 
    $rightcolumn.animate({ opacity: "0.1" }) 
    .load(siteURL + event.value + ' #rightcolumn', function() { 
     $ajaxSpinner.fadeOut(); 
     $rightcolumn.animate({ opacity: "1" }); 
    }); 
});}); 

#rightcolumnの内容がリフレッシュされたときにカラーボックスをロードするために、上記のコードを変更する必要があります。

この質問の2番目の部分もあります。画像自体への私自身のリンクも、上記のコードのためにハッシュタグによって影響を受けています。これは画像自体が私が想像すべきカラーボックスに正しく読み込まれないようにします。これらの画像が表示されないようにするにはどうしたらいいですか？私は上記のコードが可能な限り私の内部ナビゲーションリンクに影響を与えたいだけです。

多くのありがとうございます。私はあなたの返信を楽しみにしています。コードの多くは、私は物事の概念側の第1焦点を当てますので、確認することだ

Answer 1

。たぶん、あなたはあなたにそれはあなたが変更されたAjaxのDOMを介してコンテンツをロードするときのように聞こえるいくつかの手がかり...

を与えること。心配しなくても、それは私たちが期待するものです。しかし、Ajax呼び出しの前に読み込まれたスクリプトは、ページ読み込み時に存在しなかった要素にバインドされているか、存在しなくなっている要素にバインドされていると、問題が発生する可能性があります。

jQueryのライブ関数はその1つのソリューションです。特定の時点で特定の要素（または要素のコレクション）にバインドする代わりに、ライブではDOMにいつ登場するかに関係なく要素の要素（またはコレクション）へのバインディングを指定できます。バインド時に存在していなければならない要素を意味する -

カラーボックスは、しかし、そのデフォルトの「バニラ」の使用抄録内のすべての離れと、私は信じて、結合古典的なDOMを使用します。 （あなたがColorBoxへの呼び出しを表示しないので、あなたの使い方はわかりません）

Ajaxでコンテンツを読み込むたびに、それが必要です。

Answer 2

使用$('selector').delegate()それはセレクタ 'と.live()のDOMが廃止されました時計。

これを使用して要素を監視し、colorboxの初期化を開始します。この方法では、colorboxはDOM要素に依存しませんが、その逆です。

$("body").delegate("a[rel='lightbox']", "click", function (event) { 
        event.preventDefault(); 
        $.colorbox({href: $(this).attr("href"), 
          transition: "fade", 
          innerHeight: '515px', 
          innerWidth: '579px', 
          overlayClose: true, 
          iframe: true, 
          opacity: 0.3});}); 

これは基本的に問題を解決し、クロスブラウザテストです。 デリゲートクロージャのa [rel = 'lightbox]]は、初期DOMまたはAJAXリクエストがロードされているかどうかに関係なく、カラーボックスを起動するためにクリックしたリンクへの参照です。 DOMをライブで使用するつまり、次のようなタグ：

<a rel='lightbox' href="http://some.website.com">Launch Colorbox</a>