Shadowbox isn't opening consistently in IE and FF

Question

I'm generating a list of links in Javascript that should open in a shadowbox. Initially, on any given page load (Ctrl-F5 for example) the link opens in the window rather than in the shadowbox. If I can some how get it to open in the shadowbox, through luck or random happenstance, it will work until the page is reloaded again.

Here's the markup in the page:

<div id="portAgreementList">
    <ul id="blAgreements"></ul>
</div>

Here's the javascript that makes the links in blAgreements:

function (data, status)
{
    if (status == 'success')
    {
        if (data == '')
        {
            alert('URL returned no data.\r\n' +
                'URL: ' + url);
            return;
        }
        var jsonObj = StringToJSON(data); // StringToJSON function defined in /js/utilities.js

        if (!jsonObj) { return; }
        var items = '';

        if ( jsonObj.items.length > 0 ) {
            for (var xx = 0; xx < jsonObj.items.length; xx++) {
                items += '<li><a rel="shadowbox;width=750;height=450;" href="' + jsonObj.items[xx].Url +'">' + 
                jsonObj.items[xx].Text +'</a></li>';
            }
        }
        else {
            items = '<li>You have no port agreements on file for this company.</li>';
        }
        $('#blAgreements').html(items);
        Shadowbox.init();
    }
}

I'm calling to Shadowbox.init(); after I've added creating the list items and it works sometimes. What I'd like to understand is why is it inconsistent and how do I make it more reliable.

Update #1: This looks like it might be a race condition. If I load the page, in IE at least, and wait before clicking it will eventually work. With IE8 I have to wait about 3 seconds. FF doesn't seem to follow that behavior.

Update #2: With FF, if I click on the link after page load, it opens the URL like any other web page. Hit the back button and click the link again and the URL opens in the shadowbox.

Answer 1

More digging around and I found a solution, though I'd still like to know why the above had the issues it did.

function (data, status)
{
    if (status == 'success')
    {
        if (data == '')
        {
            alert('URL returned no data.\r\n' +
                'URL: ' + url);
            return;
        }
        var jsonObj = StringToJSON(data); // StringToJSON function defined in /js/utilities.js

        if (!jsonObj) { return; }
        var items = '';

        if ( jsonObj.items.length > 0 ) {
            for (var xx = 0; xx < jsonObj.items.length; xx++) {
                var li = $('<li></li>').appendTo('#blAgreements');
                var anchor = $('<a rel="shadowbox;width=750;height=450;" href="' + jsonObj.items[xx].Url +'">' + 
                jsonObj.items[xx].Text +'</a>').appendTo(li);
                Shadowbox.setup($(anchor), null);
            }
        }
        else {
            items = '<li>You have no port agreements on file for this company.</li>';
        }
    }
}

The key difference is that I am building out the DOM as elements

var li = $('<li></li>').appendTo('#blAgreements');
var anchor = $('<a rel="shadowbox;width=750;height=450;" href="' + jsonObj.items[xx].Url +'">' + jsonObj.items[xx].Text +'</a>').appendTo(li);

And then calling:

Shadowbox.setup($(anchor), null);

On the anchor.