title: jQuery is not recognising dynamic html classes/ids
body: <p>I'm creating a YouTube playlist gallery, I'm trying to get the thumbnails to open a lightbox which then displays the video iframe.</p>
  
  <p>The lightbox wont work with my dynamic html, it seems like its not recognising the classes.</p>
  
  <p>I'm fairly new to jQuery so any help or hints would be appreciated!</p>
  
  <p>The lightbox code</p>
  
  <pre><code>$(document).ready(function(){  
    $("a#show-panel").click(function(){  
      $("#lightbox, #lightbox-panel").fadeIn(300);  
    })  
    $("a#close-panel").click(function(){  
      $("#lightbox, #lightbox-panel").fadeOut(300);  
   })  
  })  
  </code></pre>
  
  <p>Calling in the YouTube data to create dynamic html</p>
  
  <pre><code>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 = "&lt;div&gt; \
   &lt;a id=\"show-panel\" href=\"#\"&gt; \
   &lt;img src=\"http://img.youtube.com/vi/"+videoId+"/mqdefault.jpg\"/&gt; &lt;/a&gt; \
     &lt;div id=\"lightbox-panel\"&gt;&lt;h2&gt;"+title+"&lt;/h2&gt; &lt;iframe id=\"ytplayer"+videoId+"\" type=\"text/html\" width=\"300\" height=\"250\" \
    src=\"http://www.youtube.com/embed/"+videoId+"?autoplay=0&amp;origin=http://example.com\" \
    frameborder=\"0\"/&gt; \
    &lt;p align=\"center\"&gt;&lt;a id=\"close-panel\" href=\"#\"&gt;Close this window&lt;/a&gt;&lt;/p&gt; \
   &lt;/div&gt; \
      &lt;/div&gt;\
      &lt;div class=\"lightbox\"&gt;&lt;/div&gt; \
  &lt;p&gt;"+title+"&lt;/p&gt; \
  &lt;p&gt;views:"+views+"&lt;/p&gt; \
  &lt;p&gt;date created: "+dateCreated+"&lt;/p&gt; \
  &lt;/div&gt;";
  return videoHtml;
  }
  </code></pre>