javascript - 使用 JQuery 更改 YouTube iframe src

Question

我正在构建一个视频播放器页面。我使用 Ajax 加载与 YouTube channel 关联的 iframe 和其他视频。我试图在多个 anchor 上使用 onclick 事件更改 iframe src，但是 onclick 事件似乎没有执行给定我的代码。

Ajax 生成 HTML

	    
    $('.play-video').on('click',function(){
    	
    	$('#video-view iframe').attr('src', $(this).data('src'));
    	$('#video-title').text($(this).data('title'));
    	$('#video-description').text($(this).data('description'));
    	
    	$('html, body').animate({
            scrollTop: $('#video-viewer').offset().top
        }, 2000);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vid-youtube">
    	 <div class="video" id="video-viewer">
    		<iframe name="youtube_player" width="560" height="250" frameborder="0" src="//www.youtube.com/embed/8VYX4jDH63c?theme=light&amp;color=red&amp;showinfo=0" allowfullscreen="true"></iframe>
    	</div>
    	<div class="col-md-12" style="padding: 20px;">
    		<h4 id="video-title">Born Depressed(take 1) - Jimquisition Intro Theme Sax Cover</h4>
    		<p id="video-description">Born Depressed by Drill Queen with Live Sax</p>
    		<hr>
    	</div>						  					
    	
    	<div style="padding: 20px !important;">
    		<div class="row videos-list">
    			<div class="col-sm-3 col-xs-6">			
    				<div class="item active">	
    					<a href="#" style="color: #565a5c" class="play-video" data-src="//www.youtube.com/embed/8VYX4jDH63c?autoplay=1&amp;theme=light&amp;color=red&amp;showinfo=0" data-description="Born Depressed by Drill Queen with Live Sax">	                  			                  		
    						<img src="https://i.ytimg.com/vi/8VYX4jDH63c/mqdefault.jpg" >
    						Born Depressed(Take 1) 
    					</a>
    				</div>
    			</div>
    			<div class="col-sm-3 col-xs-6">			
    				<div class="item ">	
    					<a href="#" style="color: #565a5c" class="play-video" data-src="//www.youtube.com/embed/L-rAHwcCb4k?autoplay=1&amp;theme=light&amp;color=red&amp;showinfo=0" data-description="Born Depressed by Drill Queen with Live Sax, Drums" data-title="Get Lucky - Daft Punk">	                  			                  		
    						<img src="https://i.ytimg.com/vi/L-rAHwcCb4k/mqdefault.jpg">
    						Get Lucky - Daft Punk
    					</a >
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

Answer 1

.on()如果使用以下语法，则适用于动态创建的元素:

$(document).on('click', '<selector>', function() {});

$(document).on('click', '.play-video', function() { 
  $('#video-viewer iframe').attr('src', $(this).data('src'));
  $('#video-title').text($(this).data('title'));
  $('#video-description').text($(this).data('description'));

  $('html, body').animate({
    scrollTop: $('#video-viewer').offset().top
  }, 2000);
});