jQuery 요소를 만든 후 JSON 데이터에 액세스하십시오.

Question

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

onclick 기능을 문자열 HTML 안에 추가 할 수 있습니까? 대신 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")); 
});