Jquery 单击更改iframe视频id

我有很多不同的youtube视频链接，我想以一种模式显示。当用户单击链接时，视频id应该从iframe api更新并加载模式

html 然而，我的点击事件似乎没有被调用。我的视频id也不会更新。

您的

标记位于页面上的元素上方。创建事件处理程序时，页面上不存在元素。您可以通过将它们包装到jQuery的处理程序（这是事件的ALAI）中来解决此问题：

基本语法：

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

});

简写语法：

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

});

备选方案：

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

});

作为另一种选择，您可以将这些处理程序添加到新的

标记中，该标记位于关闭

标记之前。使用此方法，您可以消除对

$（document）.ready

的调用，并使用现有代码，因为在创建处理程序时，元素已填充到DOM中

---

更新的工作提琴示例：

非常有效，谢谢，有没有建议将所有JS代码移动到一个单独的文件中？