JavaScript를 사용하여 링크를 클릭하면 YouTube에서 비디오를 검색 하시겠습니까?

Question

나는 링크를 클릭하면 페이지를 다시로드하지 않고도 YouTube 비디오를로드하는 페이지를 만들려고합니다. 나는 버튼을 누를 때 일하는 코드를 가지고 있으며처럼 보였다 : 내가 링크는 일을, 내가 온라인으로 다음 튜토리얼에서이 코드를 변경 시도하고있다

$(document).ready(function() { 
    $(".button").click(function() { 
     var search = $(".input").val(); 
     var keyword= encodeURIComponent(search); 
     var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=1&v=2&alt=jsonc'; 

$.ajax({ 
     type: "GET", 
     url: yt_url, 
     dataType:"jsonp", 
     success: function(response) { 
      if(response.data.items) { 
       $.each(response.data.items, function(i,data) { 
        var video_id=data.id; 
        var video_frame="<iframe width='420' height='236' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' type='text/html'></iframe>"; 
        $("#video").html(video_frame); 
       }); 
      } else { 
       $("#video").html("<div id='no'>No Video</div>"); 
      } 
     } 
    }); 
}); 
}); 

. 그래도 다음에해야 할 일이 무엇인지 확신 할 수 없지만 클래스를 변경하려고 시도했지만 링크에서 검색 데이터를 가져올 때 문제가 발생했습니다. 내가 개선하기 위해이 원하는 무엇인가 :

<div id="main_section"> 
    <div id=ytVid> 
     <iframe width="480" height="360" src="http://www.youtube.com/embed/xJ3-NnNx6Zs" frameborder="0" allowfullscreen></iframe> 
    </div> 
    <p id="1">Jackie Wilson - Reet Petite</p> 
    <p id="2">Queen - Bohemian Rhapsody</p> 
</div> 

누군가가 "재키 윌슨 - Reet 쁘띠"를 클릭

여왕 노래 것 같은 텍스트 나 링크, 그것은, YouTube 동영상을 업데이트합니다.

감사

편집 :에

$(document).ready(function() { 
    $("#songInfo").click(function() { 
    function openLink(evt) { 
      var search = evt.target.innerHTML; 
      var keyword= encodeURIComponent(search); 
      ... rest of code ... 

과 HTML : 내가 자바 스크립트 이것에 파일을 변경 내가 텍스트 아무것도 클릭

<p id="1" onclick="openLink(evt);"> Jackie Wilson - Reet Petite</p> 
<p id="2" onclick="openLink(evt);"> Queen - Bohemian Rhapsody</p> 

죄송 일어를, HTML에서 JavaScript에 대한 새로운 내용은 이전에 말씀 드렸어야했습니다.

Answer 1

<p> 태그의 "onclick"이벤트와 같은 일을하는 것이 운이 좋을 것 같습니다. documentation은 태그에 유효하다고 말합니다. 이런 식으로 뭔가 : 당신이 <p> 태그의 텍스트를 필요로하는 경우

document.getElementById("1").onclick = "openLink(evt);"; 

그런 다음,이 같은 시도 : 난 당신의 코드를 시도

function openLink(evt) { 
    var search = evt.target.innerHTML; 
    var keyword= encodeURIComponent(search); 
    ... // just like your unnamed function 
}