colorboxがAjaxで動作しない

Question

ajax呼び出しから動的に読み込まれたコンテンツからcolorboxを開こうとしています。次のクリックで、ページ上に別のブロックがロードされ、そのブロックをクリックすると、カラーボックスオーバーレイが開きます。

しかし、最初の項目のcolorboxが開かれていると、colorboxをリンクにバインドできなくなります。

参照してください、カラーボックスをバインドするために使用されている私のjavascriptのコードは次のとおりです。

$(document).ready(function() { 
    $('#recommended-app-wrapper .app_download_link').each(function() { 
     $(this).colorbox({ 
      href: $(this).attr('href'), 
      iframe: false, 
      onComplete: function() { 
       // Tooltip 
       $('#modal a.link_tooltip').each(function() { 
        $(this).click(function() { 
         return false; 
        }); 
        var content = $(this).next('.hidden').html(); 
        $(this).aToolTip({ 
         tipContent: content, 
         fixed: true, 
         clickIt: false, 
         xOffset: -180, 
         yOffset: 30 
        }); 
       }); 
       // Clear-Default 
       $('#modal input.clear-default').clearDefault(); 
      } 
     }); 
    }); 
});  

コンテンツページを呼び出す

JSPコードはどこアヤックスから、メインページをご覧ください

<dsp:a page="/fragments/product_app_download.jsp" iclass="custom custom-blue-smapp_download_link get-app"> 
    <dsp:param name="id" param="element.id"/> 
    Get app 
</dsp:a> 

ですコールが行われ、ユーザーがクリックしてカラーボックスを開くことができるブロックがロードされます。私はコードのスクリーンショットを撮った。

私は、問題は、私は一度だけ呼ばれているdocument.ready上のカラーボックスを結合していますされ、その後、次のクリックの後、それはカラーボックスに私の次の項目をバインドするdoesntのだと思います。

助けてください。

あなたは

Answer 1

あなたも、それを作成されていない要素にイベントをバインドするためにjqueryの.live()機能を使用することができ感謝しています。私はこれがあなたが必要とするかもしれないものだと思います。

Answer 2

あなたの問題は次のように考えてください：最初にページが読み込まれると、DOMが準備され、セレクタでcolorboxが初期化されます。AJAXは、カラーボックスセレクタリストにあるDOM要素を含む新しいページを呼び出します。セレクタがJavaScriptによって読み込まれた後にページにロードされたために気付かなかった。

今、それはすべてのために、「＃推奨アプリラッパー」を見ているように、これを試して、既存および新規の「.app_download_link」：

$("#recommended-app-wrapper").delegate(".app_download_link", "click", function (event) { 
        event.preventDefault(); 
        $.colorbox({href: $(this).attr("href"), 
          transition: "fade", 
          innerHeight: '515px', 
          innerWidth: '579px', 
          overlayClose: true, 
          iframe: true, 
          opacity: 0.3}, 
          onComplete: function() { 
           $('#modal a.link_tooltip').each(function(event) { 
            if(event === "click") 
             return false; 
            var content = $(this).next('.hidden').html(); 
            $(this).aToolTip({ 
             tipContent: content, 
             fixed: true, 
             clickIt: false, 
             xOffset: -180, 
             yOffset: 30 
            }); 
           }); 
           // Clear-Default 
           $('#modal input.clear-default').clearDefault(); 
          }); 
       }); 

この方法ではなく、イベントのためのプラグインの時計をさせるのを待ちます.delegate（）でイベントを監視し、その場でカラーボックスを実行してください。

onComplete関数は必要なものと正確には異なるかもしれませんが、あなたはそのアイデアを得るでしょう。