JQuery не распознает динамические HTML-классы / идентификаторы

Question

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

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

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

Код лайтбокса

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