Question

我正在创建一个YouTube播放列表库，我试图让缩略图打开一个灯箱，然后显示视频iframe。

灯箱不能使用我的动态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()绑定链接。现在，如果您要创建同一页面上可能有多个的动态链接，我会使用类选择器，因为ID是唯一的。

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

jQuery无法识别动态html类/ ids

1 个答案: