Ciao a tutti sono Mattia.
Ho un problema che non riesco a risolvere. Ho inserito un div all'interno di un'altro div con la funzione jquery .append e adesso non riesco a renderlo clickabile per fare partire la mia funzione. Potete aiutarmi??


Inserite una dimensione simile a quella suggerita negli input.
Qui c'è il link jsFiddle: https://jsfiddle.net/mttcest/x2mw37a4/

Scrivo comunque il codice:

Html:
codice HTML:
<head>

<style>

#divContenitoreSup {
  clear: both;
  outline: 1px solid;
  top: 130px;
  left: 300px;
  width: 620px;
  height: 480px;
}

#sup {
  position: relative;
  outline: 1px solid;
  margin: auto;
  margin-top: 50px;
}

</style>

</head>

<body>
Width:
<input id="wdInp" type="text" placeholder="3.00"> m
<br> Height:
<input id="heInp" type="text" placeholder="2.00"> m
<br>
<button id="invSup">Submit</button>

<!-- contenitore sup -->
<div id="divContenitoreSup"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">

$(document).ready(function() {

  var scale = 400;

  $("#invSup").click(function() {

    //Ricavo dimensioni reali

    var sWdIns = $("#wdInp").val();
    var sHeIns = $("#heInp").val();

    if (sWdIns > sHeIns) { //Dimensioni adattate alla pagina
      var sHe = (sHeIns * scale) / sWdIns;
      var sWd = scale;
    } else {
      var sWd = (sWdIns * scale) / sWdIns;
      var sHe = scale;
    }

    //creo div superficie
    $("#divContenitoreSup").append('<div id="sup"></div>');
    $("#sup").css("width", sWd);
    $("#sup").css("height", sHe);
  });
  
  $( "#sup" ).click(function() { //click su div Int

    alert("Il click funziona!");
    
  });

});

</script>

</body>
Grazie mille in anticipo per la risposta