html

Question

我有多个链接，这些链接与我想以模式展示的不同的youtube视频有关。当用户单击链接时，视频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的 document ready处理程序中来解决此问题（这是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." );
    });

});

替代：

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

更新的工作小提琴示例： jsfiddle.net

点击时更改iframe视频ID

html

Javascript

1 个答案: