由於變量範圍，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第一次點擊不起作用

回答

相關問題