jQuery要素を作成した後にJSONデータにアクセスする

Question

APIからJSONデータを受け取り、jQuery要素を作成してリストに追加しています。

作成されたHTML要素の1つをクリックすると、その要素の元のJSONデータをコンソールに記録することができます。

cards.forEach(function (card) { 
    var $newCard = $("<li>" + card.name + "</li>"); 
    $newCard.click(function() { 
     // gives me the HTML, but I don't see the properties of the 
     // object it was created from. 
     console.log(this); 
    }); 
    cardsContainer.append($newCard); 
}); 

私は私が右の文字列のHTML内onclick機能を追加することができます推測していますか？代わりにJavaScriptからそれを行う方法はありますか？

Answer 1

ただ、アクセスカード、それは関数クロージャ内にあるよう..

cards.forEach(function (card) { 
    var $newCard = $("<li>" + card.name + "</li>"); 
    $newCard.click(function() { 
     console.log(this); //will be the LI 
     console.log(card); //this will be the card 
    }); 
    cardsContainer.append($newCard); 
}); 

Answer 2

は、私はあなたがこのような何かを探していると思う：

var cardsContainer = $('#container'), 
 
    cards = [{ 
 
    name: "One" 
 
    }, { 
 
    name: "Two" 
 
    }, { 
 
    name: "Three", 
 
    test: "asd" 
 
    }] 
 
cards.forEach(function(card) { 
 
    var $newCard = $("<li>" + card.name + "</li>").data('extra', card).on('click', function(e) { 
 
    console.log($(this).data('extra')); 
 
    }); 
 

 
    cardsContainer.append($newCard); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="container"></ul>

Answer 3

は、あなたがあなたの新しい$newCard変数内のオブジェクト全体を格納するためのjQueryの.data()を使用することができます。例えば

：

var $newCard = $("<li>" + card.name + "</li>"); 
$newCard.data("myOriginalObject", card); 
$newCard.click(function() { 
    // Should now print the original object correctly 
    console.log($(this).data("myOriginalObject")); 
});