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

【问题标题】：Cant call function after creating element. jQuery创建元素后无法调用函数。 jQuery
【发布时间】：2018-06-30 22:15:28
【问题描述】：

所以我的目标是在单击“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。需要

【问题讨论】：

该死的......问题出在其他地方......因为 sn-p 工作......嗯......
不，是这样。 jQuery问题：D

标签： javascript jquery html appendchild

【解决方案1】：

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

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

您的其余代码都可以，只需使用上面的代码而不是 $("li").click..

工作Demo here

【讨论】：

工作 :D 真棒......现在你能解释一下吗？为什么它在sn-p上工作？但不能在网络服务器上工作？？点击时使用 li??
之所以可行，是因为它将事件侦听器附加到正文，然后将其委托给它的子列表项。 api.jquery.com/on - 而 $("li").click(...) 在您的情况下不起作用是因为很可能 javascript 代码在元素在 dom 中呈现之前正在运行 - 因此没有附加事件侦听器的元素到。

【解决方案2】：

官方文档说：

事件处理程序仅绑定到当前选定的元素；他们在您的代码调用 .on() 时必须存在

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

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

同样从现在开始使用.on() 方法，它将事件处理程序附加到一组选定的元素上，它可以完美地处理页面上的元素。

【讨论】：