Javascript 在创建jQuery元素后访问JSON数据

我从一个API接收JSON数据，创建jQuery元素并将它们附加到列表中

我如何使它能够在单击创建的HTML元素之一时，将该元素的原始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);
});

cards.forEach（功能（卡片）{
var$newCard=$（“
”+card.name+“
”）；
$newCard.单击（函数（）{
//给我HTML，但我看不到
//对象，该对象是从中创建的。
console.log（this）；
});
cardsContainer.append（$newCard）；
});

---

我猜我可以在字符串HTML中添加一个

onclick

函数？是否有一种方法可以通过JavaScript来实现这一点？

我猜您看起来是这样的：

var cardsContainer=$（“#容器”），
卡片=[{
姓名：“一”
}, {
姓名：“两个”
}, {
姓名:"三",，
测试：“asd”
}]
卡片。forEach（功能（卡片）{
var$newCard=$（“
”+card.name+“
”）.data（'extra'，card.）。on（'click'，函数（e）{
log（$（this.data（'extra'））；
});
cardsContainer.append（$newCard）；
});

您可以使用jQuery将整个对象存储在新的
$newCard
变量中

例如：

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

var$newCard=$（“
”+card.name+“
”）；
$newCard.data（“myOriginalObject”，card）；
$newCard.单击（函数（）{
//现在应正确打印原始对象
log（$（this.data（“myOriginalObject”））；
});
只需访问卡，因为它位于函数闭包内

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

cards.forEach（功能（卡片）{
var$newCard=$（“
”+card.name+“
”）；
$newCard.单击（函数（）{
console.log（this）；//将是LI
console.log（card）；//这将是卡
});
cardsContainer.append（$newCard）；
});
就是这样！非常感谢。我尝试了
.data（）。我忘了使用
$（this.data（）
，而不仅仅是
this.data（）
。正如我的答案所示，为什么不直接访问卡呢。。它在一个闭包中，不需要jquery.data..啊，伙计，我觉得自己很笨。怪不得我在这上面什么地方都找不到答案…：PNO需要感觉到哑巴，来自德尔菲/ C++，我花了一些时间来把头关上。