Question

我正在尝试获取值（或找到更好的方法）从我正在动态创建的div中获取值，我的目标是从输入中获取homeId和awayId以便我可以在下面的ajax调用中使用它们。任何帮助将不胜感激。在下面的点击功能中使用上面的变量是否有好的/更好的方法？

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);
    });

到目前为止，工作的是awayVal和homeVal，但我似乎无法让homeId或awayId工作。

Answer 1

您在2个选择器中缺少空格。不同之处意味着您正在寻找具有id 和的单个元素，该类与在id

元素内的某处查找类

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

而不是重复$('#' + gameId + ...存储一次对包装元素的引用，并对所有其他元素使用find（）

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

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

1 个答案: