$（これ）は特定のdiv情報を返す代わりにすべてをループしていますか？

Question

最初のdivのpタグをクリックすると、クリックしたものだけを記録するのではなく、残っているdivsのgameIdをconsole.logsします。私はここで何が間違っているのか分からない、誰にも何か示唆がある？まず

getGames().done(function(results){ 
     $.each(results, function (i, gameData){ 
      $.each(gameData, function(key, game){ 

       var gamesHome = game.home_team_division; 
       var gamesAway = game.away_team_division; 


       if(gamesHome == "NCAA Division I" || gamesAway == "NCAA Division I"){ 
        // console.log(this); 
        var gameId = game.id; 
        var homeTeam = game.home_team; 
        var awayTeam = game.away_team; 
        var pointTotal = game.total_points_bet; 
        var gameTime = game.game_time_hour; 
        var gameDate = game.game_time_date; 
        var gameId = game.id; 
        var network = game.broadcast_network; 
        var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; 
        var hueTwo = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; 
        var self = $(this); 

       $('.wrapper').append('\ 
        <div class="main-wrapper col-lg-6 col-md-6 col-sm-12">\ 
        <div class="game-cards">\ 
        <div class="chart-container">\ 
        <canvas id="'+ homeTeam +'" width="500" height="500"></canvas>\ 
        </div>\ 
        <div class="right-info">\ 
        <h4>' + awayTeam + '<br>' + " @ " + '<br>' + homeTeam +'</h4>\ 
        <h5 id="time-channel">'+ gameDate +' @ ' + gameTime + '<br>' + ' On ' + network +'</h5>\ 
        <div class="total-points-live">\ 
        <h5>Total Points Bet</h5>\ 
        <h5 id="point-total">'+ pointTotal +'</h5>\ 
        <p>'+ awayTeam +'</p>\ 
        <input class="bet-input" data-team-type="'+ awayTeam +'" type="number" pattern="[0-9]*" name="betAmount" placeholder="Wager Amount">\ 
        <p>'+ homeTeam +'</p>\ 
        <input class="bet-input" data-team-type="'+ homeTeam +'" type="number" pattern="[0-9]*" name="betAmount" placeholder="Wager Amount">\ 
        <p class="bet-button">Click To Place Bet</p>\ 
        </div>\ 
        </div>\ 
        </div>\ 
        '); 

       $('p').click(function(){ 
        var self1 = $(this); 
        console.log(gameId); 
        console.log(self1); 

       }); 

Answer 1

は、あなたの$('p').clickeachのうちのブロックを移動する必要があります。現在、クリックイベントを複数回バインドしています。次に、以下のようにeventハンドラを少し修正する必要があります。

さらに、gameIdのどこかのpタグを後で取り出せるように保存する必要があります。

... 
<p gameid="' + gameId + '">'+ awayTeam +'</p>\ 
<input class="bet-input" data-team-type="'+ awayTeam +'" type="number" pattern="[0-9]*" name="betAmount" placeholder="Wager Amount">\ 
<p gameid="' + gameId + '">'+ homeTeam +'</p>\ 
... 
... 
$('.wrapper').on('click', 'p', function() { 
    var self = $(this); 
    var gameId = self.attr('gameid'); 
    console.log(gameId); 
});