如何从动态创建的div的ID中获取值？

Question

I'm trying to get the value (or find a better way) to get the value out of a div that I'm creating dynamically, my goal is to get the homeId and awayId out of the inputs so that I can use them in the ajax call below. Any help would be greatly appreciated. Is there a good/better way to use the variables from above in my click function below?

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 Ten" || gamesAway == "Big Ten"){

                    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 homeId = game.home_team_id;
                    var awayId = game.away_team_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)) + ')';


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

                }

            });

        });
    });
    // This is the click function that sends the bet to the server. 
    $('.wrapper').on('click', '.bet-button', function() {
        debugger;
        var self = $(this);
        var gameId = self.attr('gameid');
        var awayVal = $('#' + gameId + ' input[name=betAmountAway]').val();
        var homeVal = $('#' + gameId + ' input[name=betAmountHome]').val();
        var awayId = $('#' + gameId + '.bet-input-away').attr('data-away-id');
        var homeId = $('#' + gameId + '.bet-input-home').attr('data-home-id');



        // var awayId = $('.bet-input-away').attr();
        // var homeId = $('.bet-input-home').attr(homeId);


        // This is what sends the bet to the server.
        $.ajax({
              url: "https://--------.islandshore.net/dbdata/bet/new/1/"+ gameId +"/"+ homeId +"/"+ homeVal +"",
              type: "get",
              success: function(response) {
                $('#' + gameId + ' input[name=betAmountHome]').val(''); //This resets the value box
                $('#' + gameId + ' input[name=betAmountAway]').val(''); //This resets the value box
              },
              error: function(xhr) {
                console.log('xhr')
              }
        });

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

So far what is working is the awayVal and the homeVal, but I can't seem to get the homeId or awayId to work.

Answer 1

You are missing spaces in 2 selectors. The difference of which means you are looking for a single element with that id and that class vs looking for the class somewhere inside the element with the id

var awayId = $('#' + gameId + ' .bet-input-away').attr('data-away-id');
var homeId = $('#' + gameId + ' .bet-input-home').attr('data-home-id');
                            // ^^ add spaces

Instead of doing repetitive $('#' + gameId + ... store a reference once to the wrapper element and use find() for all the other elements

var $wrapper = $('#' + gameId);
// find() example
var awayId = $wrapper.find('.bet-input-away').attr('data-away-id');