Не могу вызвать функцию после создания элемента. JQuery

Question

Итак, моя цель - запустить функцию, если нажать «li», но количество li зависит от выбора пользователя ... Функция работает, когда я создаю ровно количество элементов li ...

$("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>

Но когда я хотел бы создать список по выбору пользователя, я не могу запустить функцию, уже попробуйте:

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

и

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>

Обе функции создают мне элементы "li" с ожидаемым идентификатором или, по крайней мере, после того, как я открываю консоль и анализирую каждый элемент "li", я вижу ожидаемый идентификатор. Нужно

Answer 1

Официальная документация гласит:

Обработчики событий связаны только с выбранными в данный момент элементами; Oни должен существовать в тот момент, когда ваш код вызывает .on ()

Вам нужно убедиться, что фактический элемент существует во время прикрепления события. Поэтому, если ваши теги li не существуют во время присоединения события, метод .click() завершится неудачно. Следующий выбор - привязать событие к одному из родителей (в вашем случае это будет тег UL, например:

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

Также теперь используется метод .on(), он прикрепляет обработчики событий к выбранному набору элементов и отлично работает для элементов, присутствующих на странице.

Answer 2

Используйте метод on вместо обработчика щелчка на элементе li, например

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

С остальным кодом все в порядке, просто используйте код выше вместо $ ("li"). Нажмите ..

Рабочая Демо здесь