jQuery 변수 범위로 인해 첫 번째 클릭이 작동하지 않습니다.

YouTube 동영상의 URL에 포함 된 동영상 ID를 추출한 다음 YouTube를 삽입 할 iframe을 만들 때 참조 할 수있는 변수에 해당 ID를 저장하려고합니다. 비디오.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); 
    });

나는 유튜브 ID 변수 iframehtml에 저장된 iframe이 HTML에 포함되지 않습니다 처음 클래스 "결과"의 사업부를 클릭

. 그러나 두 번째 클릭하면 모든 것이 예상대로 작동합니다. 누가이 문제의 원인인지 알 수 있습니까? iframehtml 변수의 생성과 html을 #youtube_vid에 넣는 줄을 포함 시켰을 때 작동하게 만들었지 만, 내 사이트의 기능으로 인해 그렇게 코딩 할 수 없었습니다.

출처

2012-07-19 jgille07

그럼 live() ... –

@ReyGonzales 대신 on()을 사용해야합니다.하지만 그는 실제 문제와 관련이 없을 것입니다. '.live()'는 .on이 추가되었을 때 작동을 멈추지 않았습니다! – Alnitak

'event.preventDefault()'? –

getJSON 함수가 비동기 http get 요청을 수행 중입니다. 따라서 데이터를 호출하면 데이터가 요청에서 다시 돌아 오기 전에 반환됩니다. .result를 다시 클릭하면 데이터가 반환됩니다. 당신해서 getJSON 콜백 함수 내에서

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

를 넣어 시도, 거기에 HTML 쇼 전에 지연 될 것입니다,하지만 작동합니다.

출처

2012-07-19 19:14:34 hackattack

ID 필드를 채우는 $.each()은 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 변수 범위로 인해 첫 번째 클릭이 작동하지 않습니다.

답변

관련 문제