点击更改iframe视频标识

Question

我有一些链接与不同的youtube视频，我想在一个模式显示。当用户单击链接时，视频id应该从iframe更新并加载模式。

http://jsfiddle.net/k7FC2/7308/

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." );
});

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

Answer 1

您的<script />标记位于页面元素的上方。创建事件处理程序时，页面上不存在元素。您可以通过将它们包装在jQuery的文件准备就绪处理程序(这是DOMContentLoaded事件的alais )中来解决这个问题：

基本语法：

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

});

Alternative:

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

更新的工作填充示例： jsfiddle.net