javascript - 動的に追加されたjquery.data（）は、選択すると未定義になります

Question

li要素に任意のデータを設定している次のコードがあります

function showCountries( data )
{
    for( var i in data )
    {
        var li = document.createElement('li');
        $(li).html( '<a>' + i + '</a><span>&gt;</span>' );
        $(li).data('cargo', { state: data[i] });
        /* 
           right here, if I look at $(li).data('cargo').state in the debugger
           I see the data as expected
        */
        $('#countries').append( li );
        $(li).on('click', $.proxy( countrySelected, li ) );
    }
}

後で、選択した国で、貨物データを取得したいと思います。しかし、それは未定義です

function countrySelected()
{
    var country = $(this).children('a').html();
    // country is what I expect

    var cargo = $(this).children('a').data('cargo');
    // cargo is undefined here

    // I tried this too:
    var cargo = $('#countries li.selected a').data('cargo');
    // cargo is undefined here as well
}

私が間違っていることは何ですか？これは、ページの読み込み後に.data（）が動的に設定される問題ですか？

ありがとう、スコット

Answer 1

この行：

var cargo = $(this).children('a').data('cargo');

これに変更する必要があります：

var cargo = $(this).data('cargo');

lichild ではなく要素にデータを設定しますa。

Answer 2

liデータは要素ではなく要素に設定しますa。

var cargo = $(this).data('cargo');