Dynamically card doesn't works on click,

I'm working with the API places and map. If i click on static pre-generated card my jquery works fine, if I click on a dynamically generated filled with some google text, the jquery doesn't work, i really don't understand why this behaviour.

Behaviour expected

If you click on a dynamically generated card the section below the map should change


With the function below i create the cards, the arguments of the function are passed (without error) by the google api place.

function printCard(photoMarker, name, rating, address, idPlace) {        
  let card ="<div class=\"card-wrap\" id=\"" + idPlace + "\"><img src=\"" + photoMarker + " class=\"photo\"><div class=\"restoName\"><h3>" + name + "</h3><p class=\"restoAddress\">" + address + "</p><p class=\"ratePlace\">Rating: " + rating + "</p></div></div>";   

With this function if I click on a card I'm able to save the relative informations, just a little consideration: when I generate the cards I'm not able to enter in this function ( the console doesn't give me error about it )

$(".card-wrap").click(function() {
  console.log('sei qua');
  //check if the section detailed (columnsContainerTwo) is already open
  if (!detailSectionShow) {
    detailSectionShow = true;

  //move the scroll on the right section
    behavior: 'smooth'

  //save the variable to print
  let restaurant = {
    img: $(this).find("img").attr("src"),
    name: $(this).find("h3").text(),
    address: $(this).find(".restoAddress").text(),
    rating: "Rating: " + $(this).find(".ratePlace").text()


With the function below i change the relatives element in the section below the map,

function printDetailSection(InfoToPrint) {
  $("#detailPhoto").attr("src", InfoToPrint.img);

This is the pen of the entire project:penHere