由于变量范围，jQuery第一次点击不起作用

我想提取包含在YouTube视频网址中的视频ID，然后将该ID存储在我可以参考的变量中，以创建嵌入YouTube的iframe视频。由于变量范围，jQuery第一次点击不起作用

下面是我的代码：

$(".result").live("click", function() { 
     var result_number = 0; 
     youtubequery = "https://gdata.youtube.com/feeds/api/videos?category=Music&q=thesongstitle&v=2&alt=json&max-results=5"; 
     youtubeid = ""; 
     $.getJSON(youtubequery, function (vid_data) { 
      $.each(vid_data.feed.entry, function (e, vid) { 
       if (e == result_number) { 
        youtubeid = vid.id.$t.substring(27); 
       } 
      }); 
     }); 
     iframehtml = "<iframe height='300' width='400' src='http://www.youtube.com/embed/" + youtubeid + "?autoplay=1' frameborder='0' allowfullscreen></iframe>"; 
     $("#youtube_vid").html(iframehtml); 
    });

当我点击的类“结果”第一次不包括在存储在变量iframehtml的iframe HTML YouTube的ID一个div。但是，当我第二次点击它时，一切都按预期工作。有谁知道这可能是什么原因造成的？当我包含iframehtml变量的创建以及将html放入#youtube_vid中的行时，我能够使其工作，但由于我的网站的功能，我无法以此方式对其进行编码。

来源

2012-07-19 jgille07

那么你应该使用on（）而不是live（）... – 2012-07-19 19:11:30

@ReyGonzales他应该，但这很可能与他的实际问题无关。 '.live（）'在添加'.on'时不会停止工作！ – Alnitak 2012-07-19 19:12:38

'event.preventDefault（）'？ – 2012-07-19 19:13:59

您的getJSON函数正在执行异步http获取请求。所以当你调用它时，它会在数据从请求中返回之前返回。当你再次点击.result时，数据已经返回。尝试把

iframehtml = "<iframe height='300' width='400' src='http://www.youtube.com/embed/" + youtubeid + "?autoplay=1' frameborder='0' allowfullscreen></iframe>"; 
$("#youtube_vid").html(iframehtml);

您的getJSON回调函数内，将会有之前的HTML展示延迟，但它会奏效。

来源

2012-07-19 19:14:34 hackattack

$.each()您填写ID字段的位置在AJAX回调函数中异步运行，但您试图立即使用该变量。

您需要回调函数太过程中添加iframe：

$(".result").live("click", function() { 
    var result_number = 0; 
    var youtubequery = "https://gdata.youtube.com/feeds/api/videos?category=Music&q=thesongstitle&v=2&alt=json&max-results=5"; 
    $.getJSON(youtubequery, function (vid_data) { 
     var youtubeid; 
     $.each(vid_data.feed.entry, function (e, vid) { 
      if (e == result_number) { 
       youtubeid = vid.id.$t.substring(27); 
      } 
     }); 
     iframehtml = "<iframe height='300' width='400' src='http://www.youtube.com/embed/" + youtubeid + "?autoplay=1' frameborder='0' allowfullscreen></iframe>"; 
     $("#youtube_vid").html(iframehtml); 
    }); 
});

FWIW，你可能更喜欢预创建你的印记了iframe与所需的大小，然后只需设置.src属性开始加载。见http://jsfiddle.net/alnitak/z4rQg/

来源

2012-07-19 19:14:45 Alnitak

由于变量范围，jQuery第一次点击不起作用

回答

相关问题