javascript - 从动态创建的 li 中获取值(value)

Question

我想从我创建的动态 LI 中获取值。

我找到了这个 answer其中解释了如何正常获取它。

这是我的代码。这非常适合我的 LI 上的两个元素。

<ul class="nav nav-pills nav-stacked" id="listPreReq" style="height: 200px; overflow: auto" role="menu">
  <li class="active"><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
</ul>


$("#listPreReq li").click(function() {    
 alert($(this).html());  
});

但我可以选择向 LI 添加更多元素。我添加的所有新元素都不会触发 $("#listPreReq li").click 事件。不知道为什么。这是 demo .

$('#btPre').click(function(e) {
  var Psize= $("#listPreReq").find("li");
  Psize = Psize.size()+1;
  $("#listPreReq").append('<li><a href="#">Page '+Psize+'</a></li>');
});

Answer 1

Solution Demo

除了将事件绑定(bind)到文档之外，您甚至可以将它们绑定(bind)到 ul:

$("#listPreReq").on('click', 'li', function() {    
    alert($(this).html());  
});

看看event delegation .