无法让 jquery.data() 或 .attr() 工作都返回 undefined

Question

我已阅读有关 .data() 和 .attr() 的其他问题，但没有一个答案对我有帮助。

我有一个带有一些按钮的表格，每个按钮都有自己的 id，格式如下： player-***** 其中***** 是一个数字ID。

我还有一些隐藏的表单元素，我正在尝试：

• 从表单元素中读取值
• 生成对我的 div 的引用，例如 '#draftBtn-*****'
• 获取附加到按钮的数据。
• 对数据做点什么......

我似乎无法将数据附加到我的 div，总是返回 undefined。

.attr('player-data') 或 .data('player) 都返回未定义。

我正在使用 jQuery v1.12.0

表格中的示例行：

<tr>
    <td><span class="label label-primary">TE</span></td>
    <td>Richard Rodgers</td>
    <td><b>GB</b> @ ARI</td>
    <td>8</td>
    <td>19</td>
    <td>5100</td>
    <td>
        <div id='draftBtn-633397' class='btn btn-sm btn-success draft-player' data-player='{
            "id" : 633397,
            "player" : 16491,
            "shortName" : "R.Rodgers",
            "name" : "Richard Rodgers",
            "team" : "GB",
            "opponent" : "ARI",
            "position" : "TE",
            "salary" : 5100,
            "lastGameFantasyPoints" : "5",
            "projectedFantasyPoints" : "3",
            "opponentRank" : "8",
            "opponentPositionRank" : "19",
            "status" : "Scrambled",
            "statusCode" : "P",
            "statusColor" : "green"
        }'>+</div>
    </td>
</tr>

我的javascript：

var squadPlayers = {
    'qb': null,
    'rb1': null,
    'rb2': null,
    'wr1': null,
    'wr2': null,
    'te': null,
    'k': null,
    'flex': null,
    'def': null
};

var getPosKeys = function(){
    var keys = [];
    for (var key in squadPlayers) {
        if (squadPlayers.hasOwnProperty(key)) {
            keys.push(key);
        }
    }
    return keys;
}

var initSquad = function(){
    var keys = getPosKeys();
    console.log(keys);    
    keys.forEach(function(element) {
        var formRef = '#contestEntry_' + element;
        console.log(formRef);
        var playerID = $(formRef).val();
        console.log({'playerID': playerID}); // 633397
        var btnRef = '#draftBtn-'+playerID;
        console.log({'btnRef' : btnRef }); // '#draftBtn-633397'
        var playerAttr = $(btnRef).attr('data-player');
        console.log(playerAttr); // undefined
        var playerData = $(btnRef).data('player');
        console.log(playerData); // undefined

       //do something with the data.....        
       //addPlayerToSquad($)
    }, this);
}

Answer 1

FROM COMMENTS（将按钮用作事件）：

所以我现在使用按钮作为事件的触发器，而不是从表格行中，一个简单的测试将显示一切正常：

$(function() {

  $(".btn").click(function() {
      var tr = $(this).closest("tr").find("td:last div"),
        json = tr.data("player");

     alert('ID: ' + json.id + '\nTeam: ' + json.team);
 });

});

实时示例：http://jsbin.com/kojunibixa/1/edit?html,js,output

P.S. 我还是不明白把容易做的事情复杂化的想法......对不起。