Cant call function after creating element. jQuery

Question

So my target is to run a function when click on "li" but number of li depends from user choice... Function work when i create exactly amount of li elements...

$("li").click(function(){
var e = $(this).attr("id");
 		alert(e);});
    

li{
	border: 1px solid black;
	cursor: pointer;
	display: inline-block;
	padding:5px 10px 5px 10px;
}
ul{
	display: inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="questlist">
  <li id='quest1'>1</li>
  <li id='quest2'>2</li>
  <li id='quest3'>3</li>
  <li id='quest4'>4</li>
  <li id='quest5'>5</li>
  <li id='quest6'>6</li>
  <li id='quest7'>7</li>
  <li id='quest8'>8</li>
  <li id='quest9'>9</li>
  <li id='quest10'>10</li>
  	</ul>

But when i would like to create list from user choice i cant run function already try:

function countList(ListX){
    for(k=0;k<ListX; k++){
        ke = k+1;
        node = document.createElement("LI");
        node.setAttribute("id", "quest"+ke);
        textnode = document.createTextNode(ke);
        node.appendChild(textnode);
        document.getElementById("questlist").appendChild(node);
        }}

and

function countList(ListX){
  for(k=0;k<ListX; k++){
  ke = k+1;
  document.getElementById("questlist").innerHTML += "<li id='quest"+ke+"'>"+ke+"</li>";
        }}

var ListX = 10;

function countList(ListX){
    for(k=0;k<ListX; k++){
        ke = k+1;
        node = document.createElement("LI");
        node.setAttribute("id", "quest"+ke);
        textnode = document.createTextNode(ke);
        node.appendChild(textnode);
        document.getElementById("questlist").appendChild(node);
        }}

countList(ListX);

$("li").click(function(){
var e = $(this).attr("id");
 		alert(e);});

li{
	border: 1px solid black;
	cursor: pointer;
	display: inline-block;
	padding:5px 10px 5px 10px;
}
ul{
	display: inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="questlist"></ul>

Both of function create me "li" elements with expected id, or at least after i open a console and analyze each "li" element i can see expected id. Need

Answer 1

Use the on method instead of click handler on li element, like this

$('body').on('click', 'li', function() {
    var e = $(this).attr("id");
    alert(e);
});

Rest of your code is fine, just use above code instead of $("li").click..

Working Demo here