jQuery не распознает динамические классы html/id

Question

Я создаю галерею плейлистов YouTube, я пытаюсь открыть миниатюры, чтобы открыть лайтбокс, который затем отображает видеофрагмент iframe.

Лайтбокс не работает с моим динамическим html, кажется, что он не распознает классы.

Я довольно новичок в jQuery, поэтому любая помощь или подсказки будут оценены!

Код Lightbox

$(document).ready(function(){ 
    $("a#show-panel").click(function(){ 
    $("#lightbox, #lightbox-panel").fadeIn(300); 
    }) 
    $("a#close-panel").click(function(){ 
    $("#lightbox, #lightbox-panel").fadeOut(300); 
}) 
}) 

Вызов в данных YouTube для создания динамических HTML

function getVideoHtml(video) 
{ 

title = video.title.$t; 
url = video.content.src; 
views = video.yt$statistics.viewCount; 
dateCreated = video.published.$t; 
videoId = video.media$group.yt$videoid.$t; 
//console.log(videoId); 
videoThumb = video.media$group.media$thumbnail.url; 
//console.log(videoThumb); 
videoHtml = "<div> \ 
<a id=\"show-panel\" href=\"#\"> \ 
<img src=\"http://img.youtube.com/vi/"+videoId+"/mqdefault.jpg\"/> </a> \ 
    <div id=\"lightbox-panel\"><h2>"+title+"</h2> <iframe id=\"ytplayer"+videoId+"\" type=\"text/html\" width=\"300\" height=\"250\" \ 
    src=\"http://www.youtube.com/embed/"+videoId+"?autoplay=0&origin=http://example.com\" \ 
    frameborder=\"0\"/> \ 
    <p align=\"center\"><a id=\"close-panel\" href=\"#\">Close this window</a></p> \ 
</div> \ 
    </div>\ 
    <div class=\"lightbox\"></div> \ 
<p>"+title+"</p> \ 
<p>views:"+views+"</p> \ 
<p>date created: "+dateCreated+"</p> \ 
</div>"; 
return videoHtml; 
} 

Answer 1

попробовать его таким образом. Вам нужно привязать ссылки, используя on(). Теперь, если вы создаете динамические ссылки, где на одной странице может быть несколько, я бы использовал селектор классов, потому что идентификаторы уникальны.

$(document).ready(function(){ 
    $(document).on("click","a#show-panel",function(){ 
    $("#lightbox, #lightbox-panel").fadeIn(300); 
    }) 
    $(document).on("click","a#close-panel",function(){ 
    $("#lightbox, #lightbox-panel").fadeOut(300); 
}) 
})