Класс лайтбокса HTML Kickstart на <a>

Question

У меня возникла небольшая проблема с получением ссылки для показа в лайтбоксе.

Я использую HTML Kickstart, который использует fancybox (я думаю). Когда я нажимаю на кнопку, вызывается следующая функция. Это меняет innerHTML, но по какой-то причине id='inline' игнорируется

Я скопировал и вставил HTML-код <a id='inline' href='http://sample.mylink.com'>New Link</a> на мою веб-страницу, и она работает как ожидалось. Когда я нажимаю кнопку, ссылка открывается в лайтбоксе.

Кто-нибудь знает, почему идентификатор игнорируется, когда я делаю это через JavaScript?

РЕДАКТИРОВАТЬ

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

Это фактический код, который я использую, css - это то, что использует fancybox. Я бы подумал, что это будет работать с селектором идентификатора.

Answer 1

Да, я не знаю, в чем проблема, но я нашел обходной путь.

Я просто вызываю функцию javascript при нажатии на ссылку, которая, в свою очередь, вызывает некоторый jQuery.

Функция Javascript для загрузки 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>

Дополнительная функция Javascript для открытия якоря в лайтбоксе

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

Answer 2

Ну, вероятно, у вашего класса CSS есть дополнительный селектор, это может быть

.parentClass .lightbox { /**css here*/}

Как я упоминал выше, проблема в селекторе CSS. Дополнительная информация читайте Информация: Селекторы, основанные на части отношений. Я не уверен в том, как работает лайтбокс, но пытаюсь установить класс на родительский элемент A, скажем, td затем селектор

.lightbox a {styles here}

будет работать, это означает, что этот стиль будет применяться ко всем элементам внутри элемента с классом лайтбокс