javascript - 从动态生成的 div 调用 li

Question

我有一个 div，然后在其中动态生成几个 div，所以它看起来像这样生成的:

<div class="info">
  <div class="other"></div>
  <div class="items">
    <li></li>
    <li></li>
  </div>
</div>

我在 $(".info") 上使用 .append 来插入 div 和 li(在其中一个)。我的问题是让 li 可点击。由于它们是动态生成的(及其父级 $(".items"))，因此这是行不通的:

$(".items").on('click', 'li', function() {
  console.log("val"); 
});

编辑:嘿，我已将 div 更改为 ul，因此生成了:

<div class="info">
  <div class="other"></div>
  <ul class="items">
    <li></li>
    <li></li>
  </div>
</div>

但是我之前的js还是不行。现在尝试您的所有建议!谢谢!

Answer 1

您必须将事件委派到 .info、body 或 document，因为您甚至会生成 .items动态。并且 li 仅在 ul 内有效。

$(".info").on('click', '.items li', function(e) {
    console.log("val"); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="info">
  <div class="other"></div>
  <ul class="items">
    <li>one</li>
    <li>two</li>
  </ul>
</div>