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

使用on方法代替对li元素的点击处理程序，像这样

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

最好不要使用$（“ li”）。click来使用上面的代码。

工作Demo here

Answer 2

官方文件说：

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

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

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

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

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

2 个答案: