colorbox不能使用Ajax

我想從ajax調用中動態加載內容打開colorbox。點擊下一步，它會加載頁面上的另一個塊，並單擊該塊，應該打開彩盒覆蓋。colorbox不能使用Ajax

但是對於第一個項目，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>

請參閱主網頁，從哪裏AJAX正在進行調用，並加載用戶可以單擊並打開彩盒的塊。我採取了代碼的截圖。

我認爲，問題是，我對未來的點擊它不綁定我的下一個項目彩盒結合被稱爲只有一個時間的document.ready的顏色框，再經過。

請幫忙。

謝謝

來源

2011-09-08 Gendaful

您可以使用jQuery的.live()功能將事件綁定到甚至還沒有被創建它的元素。我認爲這是你可能需要的。

來源

2011-09-09 00:49:51

想想你的問題是這樣的：在頁面加載最初DOM已準備就緒，並且爲選擇器初始化colorbox AJAX調用頁面的一個新部分，其中有一些DOM元素位於colorbox選擇器列表中，但isn' t注意到，因爲它在javascript選擇器被讀取後加載到頁面中。

現在

試試這個，因爲這手錶「＃推薦-APP-包裝」所有現有和新的「.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（）觀看事件，並在飛行中執行colorbox ...

onComplete函數可能並不完全符合您的需求，但您明白了。

來源

2012-01-24 18:54:28 Relic

colorbox不能使用Ajax

回答

相關問題