使用jquery .load（）怪異行爲的嵌入式html中的Colorbox

Question

嘗試使用colorbox jquery插件時遇到了一個有趣的事件。

首先，爲了確保我正確使用該插件，我創建了一個測試頁面，該頁面加載了內聯div，並且工作正常。

接下來我將這段代碼遷移到我的網站並發現了一些奇怪的顯示。

首先我需要解釋我在如何加載HTML：

我有了導航按鈕的主index.htm網頁。每個執行一個jquery .load（），在內容div中加載另一個html頁面。加載到內容div中的html具有colorbox代碼和加載到colorbox中的div。

Sample .load() used in nav button in index.htm: 

//loads home.htm into contentdiv inside index.htm 
$(document).ready(function() { 
    $("#btHome").click(function (event) { 
     $('#contentregion').load('home.htm'); 
    }); 

    return false; 
}); 

當我在這個嵌入式html頁面（home.htm）中調用顏色框函數時，我什麼都看不到。我知道加載的顏色框，因爲我無法點擊整個頁面上的任何按鈕或鏈接。

//function to load colorbox inline 
$(document).ready(function() { 
    $(".HomeAccreditations").colorbox({ transition: "fade", speed: 500, overlayClose:   false, inline: true, href: "#AccredPopup", height: "500px", width: "500px"}); 
}); 

接下來我嘗試了以下內容。我如前所述加載了index.html頁面，然後使用導航按鈕導航到不同的嵌入式html。

接下來我通過導航按鈕返回到index.html。令我驚訝的是，現在的colorbox模式已經出現，但是我不能點擊盒子上的任何地方，因爲它只是顯示出只顯示模式的形式。

Answer 1

您可以成功使用此：

$.colorbox({ transition: "fade", speed: 500, overlayClose: false, inline: true, href: "#AccredPopup", height: "500px", width: "500px"});