Изменить идентификатор видео iframe при нажатии

Question

У меня есть несколько ссылок с различными видео на YouTube, которые я хотел бы показать в модальном режиме. Когда пользователь щелкает ссылку, идентификатор видео должен обновляться из API 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 (который является alais для события 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." );
    });

});

Альтернатива:

AsВ качестве альтернативы вы можете добавить эти обработчики в новый тег <script />, расположенный непосредственно перед закрывающим тегом </body>. С помощью этого метода вы можете исключить вызов к $(document).ready и использовать существующий код, так как элементы уже заполнены.в DOM к моменту создания обработчиков.

Обновленный пример рабочей скрипки: jsfiddle.net