Function not get called from dynamically created html code

Question

I'am changing the html code from javascript and want to call same function from created "div"s. but it is not called.

As you can see 'html' which is formed after function invoke also has class="screen" but created 'div's doesn't support it.

var i;
var clear = 2;
$("#container").click(function() {
  var clickid = $(this).attr('id');
  var left = document.getElementById(clickid).offsetLeft;
  var top = document.getElementById(clickid).offsetTop;
  var height = document.getElementById(clickid).offsetHeight;
  var width = document.getElementById(clickid).offsetWidth;
  var x = document.getElementById(clickid).value;
  orient = prompt("vertical or horizontal ?");
  numdiv = prompt("How many divisions should be created ?");
  var divsper = [];
  var html = "";
  for (i = 0; i < numdiv; i++) {
    per = prompt("Percentage of " + (i + 1) + "th division ?");
    divsper.push(per);
  }
  if (orient == "vertical") {
    for (i = 0; i < numdiv; i++) {
      l = Math.floor(left + ((i * divsper[i] * width) / 100));
      w = Math.floor((divsper[i] * width) / 100);
      html = html + "<div id=" + clickid + " class=\"screen\" style=\"float:left; top:" + (top) + "px; left:" + (l) + "px; height:" + (height - clear) + "px; width:" + (w - clear) + "px; border:1px solid black;\"></div>"
    }
    document.getElementById(clickid).outerHTML = html;
    //document.getElementById(clickid).unwrap();
  }

});

* {
  padding: 0px;
  margin: 0px;
}

body {}

#container {
  background-color: pink;
  top=0%;
  left=0%;
  height: 100vh;
}

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

Answer 1

Replace '$("#container").click(function() {' this line with '$("html").on('click', '[id*=container]', function() {'. It will work for you.

var i;
var clear = 2;
$("html").on('click', '[id*=container]', function() {
  var clickid = $(this).attr('id');
  var left = this.offsetLeft;
  var top = this.offsetTop;
  var height = this.offsetHeight;
  var width = this.offsetWidth;
  var x = this.value;
  orient = prompt("vertical or horizontal ?");
  numdiv = prompt("How many divisions should be created ?");
  var divsper = [];
  var html = "";
  for (i = 0; i < numdiv; i++) {
    per = prompt("Percentage of " + (i + 1) + "th division ?");
    divsper.push(per);
  }
  if (orient == "vertical") {
    for (i = 0; i < numdiv; i++) {
      l = Math.floor(left + ((i * divsper[i] * width) / 100));
      w = Math.floor((divsper[i] * width) / 100);
      html = html + "<div id=" + clickid + (i + 1) + " class=\"screen\" style=\"float:left; top:" + (top) + "px; left:" + (l) + "px; height:" + (height - clear) + "px; width:" + (w - clear) + "px; border:1px solid black;\"></div>"
    }
    this.outerHTML = html;
    //this.unwrap();
  }

});

* {
  padding: 0px;
  margin: 0px;
}

body {}

#container {
  background-color: pink;
  top=0%;
  left=0%;
  height: 100vh;
}

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