HTML Kickstart light box class on <a>

Question

I am having a bit of a problem with getting a link to show in a lightbox.

I'm using HTML Kickstart which uses fancybox (I think). When I click on a button the below function is called. It does change the innerHTML but for some reason the id='inline' is ignored.

I copied and pasted the HTML code <a id='inline' href='http://sample.mylink.com'>New Link</a> to my webpage and it works as expected. When I click the button the the link opens in a lightbox.

Anyone know why the id is being ignored when I do this via javascript?

EDIT

Javascript

function loadGoGo() 
{
    alert('Boo!');
    var link = document.getElementById("GoGo");
    link.innerHTML = "<table class='sortable'>" +
                    "<tr>" +
                        "<td>" +
                            "<a id='inline' href='reply.html'>Boo Link</a>" +
                        "</td>" +
                    "</tr>" +
                "</table>";
}

HTML

<Button onClick="loadGoGo()" >Load Go Go Link</Button>
<div id="GoGo">
</div>

jQuery

$('a#inline').fancybox({
        overlayOpacity: 0.2,
        overlayColor: '#000'
    });

This is the actual code I'm using, the css is whatever fancybox uses. I would have thought this would work with an id selector.

Answer 1

Yeah I don't know what the problem is but I found a work around.

I simply call a javascript function when the link is clicked, which in turn calls some jQuery.

Javascript function to load innerHTML

function loadGoGo() 
{
    alert('Boo!');
    var link = document.getElementById("GoGo");
    link.innerHTML = "<table class='sortable'>" +
                    "<tr>" +
                        "<td>" +
                            "<a href='javascript:void(0);' onClick='javascript:showPopup();'>Boo Link</a>" +
                        "</td>" +
                    "</tr>" +
                "</table>";
}

HTML

<Button onClick="loadGoGo()" >Load Go Go Link</Button>
<div id="GoGo">
</div>

Extra Javascript function to open anchor in lightbox

function showPopup()
{
    $.fancybox({
        href            : 'reply.html',
        overlayOpacity  : 0.2,
        overlayColor    : '#000'
    });
}