$ (". Class"). Val() liefert undefinierten Wert

Question

Ich bin in der Trello-API einhaken und erstellen ein mit den Listen von einem Board. Ich versuche dann, alle Karten von jeder Liste aufzulisten. Wenn die ListID vom value-Attribut abgerufen wird, wird "undefined" zurückgegeben. Warum ist das?

ich drucke es aus mit document.getElementById("demo").innerHTML = $(".board").val();

//HTML 
<label>Choose from a List of Boards</label> 
<div id="output"></div> 

<label>Display Cards Below for Board Selected</label> 
<div id="outputCards"></div> 

<p id="demo"></p> 

//Javascript 
    var $boards = $("<select>") 
      .attr("id", "boards") 
     .text("Loading Boards...") 
     .appendTo("#output"); 

    Trello.get("/boards/BOARD_ID/lists", function(boards) { 
     $boards.empty(); 
     $.each(boards, function(ix, board) { 
      $("<option>") 
      .attr({href: board.url, target: "trello", value : board.id, name : board.id, id : board.id}) 
      .addClass("board") 
      .text(board.name) 
      .appendTo($boards); 
     }); 
    }); 


    var $cards = $("<div>") 
     .text("Loading Cards...") 
     .appendTo("#outputCards") 
     .appendTo("#demo"); 

    // This is where I'm trying to return the value 
    document.getElementById("demo").innerHTML = $(".board").val(); 

    var resource = "lists/LIST_ID/cards"; 
    Trello.get(resource, function(cards) { 
     $cards.empty(); 
     $.each(cards, function(ix, card) { 
      $("<a>") 
      .attr({href: card.url, target: "trello"}) 
      .addClass("card") 
      .text(card.name) 
      .appendTo($cards); 
     }); 
    }); 

Die HTML wird wie folgt ausgibt:

<label>Choose from a List of Boards</label> 
    <div id="output"> 
     <select id="boards"> 
      <option target="trello" value="LIST_ID" name="LIST_ID" id="LIST_ID" class="board"> 
       List One 
      </option> 
      ... 
     </select> 
    </div> 

<label>Display Cards Below for Board Selected</label> 
<div id="outputCards"></div> 

<p id="demo">undefined</p> 

Answer 1

denke ich, das Hauptproblem ist, dass die board-Klasse wird nur auf die Elemente hinzugefügt werden im Trello.get Rückruf.

Da dieser Code asynchron ausgeführt wird, ist es wahrscheinlich, dass Sie $(".board").val() ausführen, bevor der Code im Callback ausgeführt wurde, dh $ (". Board") hat keine Elemente zurückgegeben.

Ich würde so etwas wie dieses

Trello.get("/boards/BOARD_ID/lists", function(boards) { 
     $boards.empty(); 
     $.each(boards, function(ix, board) { 
      $("<option>") 
      .attr({href: board.url, target: "trello", value : board.id, name : board.id, id : board.id}) 
      .addClass("board") 
      .text(board.name) 
      .appendTo($boards); 
     }); 
     // This is where I'm trying to return the value 

     $('#board').change(function() { 
      document.getElementById("demo").innerHTML = $(".board:selected").val(); 
     }); 
    });