Colorbox inside embedded html using jquery .load() weird behavior

I came across an interesting event while attempting to use colorbox jquery plugin.

First, to ensure that I was using the plugin properly I created a test page that loaded a div inline and it worked.

Next I migrated this code into my web site and found some weird display.

first i need to explain how i am loading the html:

I have a main index.htm page that has nav buttons. Each perform a jquery .load() which loads another html page inside the a content div. The html that is loaded into the content div has the colorbox code and the div that loads up into colorbox.

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;
});

When I call the color box function from within this embedded html page (home.htm) I just see nothing. I know the color box loaded because I cannot click any buttons or links anywhere on the wh开发者_开发问答ole page.

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

Next I tried the following. I loaded the index.html page as described before then navigated to a different embeded html using the nav buttons.

Next I returned back to index.html via the nav buttons. To my surprise the colorbox modal now now shows up however i cannot click anywhere on the box as its just showing up like display only modal form.

You may succeed using this:

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