单击更改 iframe 视频 ID

Question

我有许多 link 有不同的 YouTube 视频，我想以模式显示。当用户点击 link 时，视频 ID 应该从 iframe api 更新并加载模式。

html

<a id='video-player-1' href="#my_modal" data-toggle="modal" data-book-id="VDB65S6rCC0" >Open Modal 1</a>
<a id='video-player-2' href="#my_modal" data-toggle="modal" data-book-id="1roy4o4tqQM" >Open Modal 2</a>
<a id='video-player-3' href="#my_modal" data-toggle="modal" data-book-id="Q3w7Fz6KFa8" >Open Modal 3</a>

Javascript

$('#video-player-1').click(function(e) {
    var bookId = $(e.relatedTarget).data('book-id');
    var x = new String(bookId);
    player.loadVideoById(x);
    alert("HEELO");
    });

$( "#video-player-2" ).click(function() {
  alert( "Handler for .click() called." );
});

但是，我的点击事件似乎没有被调用。我的视频 ID 也没有更新。

Answer 1

您的 <script /> 标签位于页面元素的上方。创建事件处理程序时，页面上不存在元素。您可以通过将它们包装在 jQuery's document ready handler (which is an alais for the DOMContentLoaded 事件中来解决此问题：

基本语法：

$(document).ready(function () {

    $('#video-player-1').click(function(e) {
         var bookId = $(e.relatedTarget).data('book-id');
        var x = new String(bookId);
        player.loadVideoById(x);
        alert("HEELO");
        });

    $( "#video-player-2" ).click(function() {
      alert( "Handler for .click() called." );
    });

});

速记语法：

$(function () {

    $('#video-player-1').click(function(e) {
         var bookId = $(e.relatedTarget).data('book-id');
        var x = new String(bookId);
        player.loadVideoById(x);
        alert("HEELO");
        });

    $( "#video-player-2" ).click(function() {
      alert( "Handler for .click() called." );
    });

});

选择：

作为另一种选择，您可以将这些处理程序添加到位于结束 </body> 标记之前的新 <script /> 标记中。使用此方法，您可以消除对 $(document).ready 的调用并使用现有代码，因为在创建处理程序时元素已经填充到 DOM 中。

更新工作 Fiddle 示例： jsfiddle.net

单击更改 iframe 视频 ID

Change iframe video id on click

jquery

youtube-iframe-api

html

Javascript