的JavaScript可以訪問一個變量

Question

• 列表項聲明的元素

  i want a javascript that can access the button elements inside 
      the 
  dot.append() function. so that when i clicked the button i 
  get the value of that button. 
  below is a piece of code that have been working on this morning. 
      i appreciate any support or hint from anyone.Thank you in 
  advance. 
  further more i am also new in youtube data api. 
  

  
   
  
   
  
   
  
   
      function main_search(){ 
   
  \t $("form").on("submit",function(e){ 
   
  \t \t e.preventDefault(); 
   
  \t \t //after that we prepare the request 
   
  \t \t var myRequest = gapi.client.youtube.search.list({ 
   
  \t \t \t part: 'snippet', 
   
  \t q: encodeURIComponent($("#query").val()).replace(/%20/g, "+"), 
   
        \t maxResults :5, 
   
        type : 'video' \t \t \t 
   
  \t \t }); 
   
  \t \t // then we execute the request 
   
  \t \t myRequest.execute(function(response){ 
   
  \t \t  var results = response.result; 
   
  \t \t \t $.each(results.items, function(index,item){ 
   
  
   
  
   
  \t $("#results").append('<li>'+item.id.videoId+" "+item.snippet.title+" 
   
  
   
      "+item.snippet.channelTitle+" "+item.snippet.description+" 
   
      
   
      "+item.snippet.publishedAt+" "+'<img 
   
                         src="'+item.snippet.thumbnails.high.url+'">'+'<button 
   
      class="class_btns" value="'+item.id.videoId+'">'+'get video url 
   
      '+'</buttons>'+'</li>'+"<br>"); 
   
  \t \t \t }); 
   
  \t \t \t 
   
  \t \t }); 
   
      }); 
   
      } 
   
  
   
  function loadAPI(){ 
   
  \t gapi.client.setApiKey("AIzaSyC1CJHONRDvyfSS3xAOG9SfW_VCXMoLK5Y"); 
   
  \t gapi.client.load("youtube","v3", function(){ 
   
  \t \t //my youtube api is read 
   
  \t \t main_search(); 
   
  \t }); 
   
      }

  
   
  <form action="#"> 
   
  <input type="search" id="search_string" placeholder="Your string 
   
  goes 
   
      here...."></input> 
   
  
   
  <input type="submit" name="search-btn" id="search_btn" value="search"> 
   
  </input> 
   
  </form> 
   
  
   
  \t <ul id="result_box"></ul> 
   
  \t 
   
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1 
   
  /jquery.min.js"></script> 
   
  
   
      <script src="search.js"></script> 
   
  \t 
   
      
   
  

Answer 1

只需將語句分成TW這樣您可以稍後訪問元素O線：

var element = document.createElement('<li>'+item.id.videoId+" "+item.snippet.title+" 

    "+item.snippet.channelTitle+" "+item.snippet.description+" 

    "+item.snippet.publishedAt+" "+'<img 
                       src="'+item.snippet.thumbnails.high.url+'">'+'<button 
    class="class_btns" value="'+item.id.videoId+'">'+'get video url 
    '+'</buttons>'+'</li>'+"<br>"); 

$("#results").append(element); 

或者，如果你想有一個jQuery對象，而不是：

var element = $('<li>'+item.id.videoId+" "+item.snippet.title+" 

    "+item.snippet.channelTitle+" "+item.snippet.description+" 

    "+item.snippet.publishedAt+" "+'<img 
                       src="'+item.snippet.thumbnails.high.url+'">'+'<button 
    class="class_btns" value="'+item.id.videoId+'">'+'get video url 
    '+'</buttons>'+'</li>'+"<br>"); 

然後，您可以不管你從element可變希望獲得。

或者你可以只搶按鈕以後使用類，如果你保持當前的代碼：

var button = $('.class_btns');