javascript - 创建元素后无法调用函数。查询

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>

这两个函数都会为我创建具有预期 ID 的“li”元素，或者至少在我打开控制台并分析每个“li”元素后，我可以看到预期的 id。需要

Answer 1

像这样在 li 元素上使用 on 方法而不是点击处理程序

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

你的其余代码没问题，只需使用上面的代码而不是 $("li").click..

工作 Demo here