创建元素后无法调用函数。 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>

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

Answer 1

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

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

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

工作Demo here

Answer 2

官方文档说：

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on()

您需要确保在附加事件时实际元素存在。因此，如果您的 li 标签在附加事件时不存在，则 .click() 方法将失败。您的下一个选择是将事件绑定到 parents 之一（在您的情况下它将是 UL 标记，如下所示：

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

也从现在开始使用 .on() 方法，它将事件处理程序附加到一组选定的元素，并且它非常适合页面上存在的元素。

创建元素后无法调用函数。 jQuery

Cant call function after creating element. jQuery

html

javascript

jquery

appendchild