動的に作成された入力値を取得しようとすると、どのように「this」値が得られますか？

Question

私は動的に作成されたdivs入力のそれぞれの値を取得しようとしていますが、取得には苦労しています。私はボタンのクリックで "this"の入力値を取得したいのですが、クリックするボタンの種類にかかわらず最初のdivの入力値を与えるだけです。どんな助けでも大歓迎です！

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

       var gamesHome = game.home_team_conference; 
       var gamesAway = game.away_team_conference; 


       if(gamesHome == "Big 12" || gamesAway == "Big 12"){ 
        // 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 '+ gameId +' 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-away" data-team-type="'+ awayTeam +'" type="number" pattern="[0-9]*" name="betAmountAway" placeholder="Wager Amount">\ 
        <p>'+ homeTeam +'</p>\ 
        <input class="bet-input-home" data-team-type="'+ homeTeam +'" type="number" pattern="[0-9]*" name="betAmountHome" placeholder="Wager Amount">\ 
        <p class="bet-button" gameid="'+ gameId +'">Click To Place Bet</p>\ 
        </div>\ 
        </div>\ 
        </div>\ 
        '); 


       var ctx = document.getElementById(homeTeam).getContext('2d'); 

       var myChart = new Chart(ctx, { 
        type: 'doughnut', 
        data: { 
        labels: [homeTeam, awayTeam], 
        datasets: [{ 
         backgroundColor: [ 
         hue, 
         hueTwo, 
         ], 
         data: [200, 500] 
        , borderWidth: 0 
        }] 
        }, 
        options: { 
         responsive: true 
        , maintainAspectRatio: true 
        } 
       }); 


       // $('.bet-button').click(function(){ 
       // if ($(this).hasClass('bet-button')){ 
       // $(this).text('Place Bet'); 
       // $(this).removeClass('bet-button').addClass('button-toggle'); 
       // } else { 
       // $(this).removeClass('button-toggle').addClass('bet-button').text('Click To Place Bet'); 
       // } 
       // }); 

       } 

      }); 

     }); 
    }); 
    $('.wrapper').on('click', '.bet-button', function() { 
    var self = $(this); 
    var gameId = self.attr('gameid'); 
    var awayVal = self.attr('.bet-input-away').val(); 
    var homeVal = self.attr('.bet-input-home').val(); 

    console.log(gameId); 
    console.log(homeVal); 
    console.log(awayVal); 
    }); 
}); 

Answer 1

あなたがinputsの値を取得しようとしている場合は、inputsにval()を使用する必要があります。しかし、あなたはのattrを使用しています。 attrの使用方法が正しくありません。また、divの親属性としてゲームにidを追加すると、はるかに簡単になります。これを試してみてください：

$('.wrapper').append('\ 
       <div id="' + gameId + '" class="main-wrapper '+ gameId +' 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-away" data-team-type="'+ awayTeam +'" type="number" pattern="[0-9]*" name="betAmountAway" placeholder="Wager Amount">\ 
       <p>'+ homeTeam +'</p>\ 
       <input class="bet-input-home" data-team-type="'+ homeTeam +'" type="number" pattern="[0-9]*" name="betAmountHome" placeholder="Wager Amount">\ 
       <p class="bet-button" gameid="'+ gameId +'">Click To Place Bet</p>\ 
       </div>\ 
       </div>\ 
       </div>\ 
'); 



$('.wrapper').on('click', '.bet-button', function() { 
    var self = $(this); 
    var gameId = self.attr('gameid'); 
    var awayVal = $('#' + gameId + ' input[name=betAmountAway]'); 
    var homeVal = $('#' + gameId + ' input[name=betAmountHome]'); 
    console.log(gameId); 
    console.log(homeVal); 
    console.log(awayVal); 
});