javascript - 有什么办法可以给子节点添加点击事件吗？

Question

下面是我的代码:

<div class="sidebar-list">
  <h4>Type</h4>
  <ul>
    <li><a href="#" id='shop'>   Shop</a></li>
    <li><a href="#" id='food'>   Food</a></li>
    <li><a href="#" id='beauty'> Beauty</a></li>
    <li><a href="#" id='comfort'>Comfort</a></li>
    <li><a href="#" id='health'> Health</a></li>
    <li><a href="#" id='pet'>    Pet</a></li>
    <li><a href="#" id='fun'>    Fun</a></li>
    <li><a href="#" id='life'>   Life</a></li>
  </ul>
</div>

我知道我可以向每个 li 项目写入 o'clock，但是有任何智能方法可以添加事件监听以单击侧边栏列表列表的监听列表项目并获取它的值吗？

Answer 1

尝试:

$('.sidebar-list').on('click', 'li', function() {
  alert($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar-list">
  <h4>Type</h4>
  <ul>
    <li><a href="#" id='shop'>   Shop</a></li>
    <li><a href="#" id='food'>   Food</a></li>
    <li><a href="#" id='beauty'> Beauty</a></li>
    <li><a href="#" id='comfort'>Comfort</a></li>
    <li><a href="#" id='health'> Health</a></li>
    <li><a href="#" id='pet'>    Pet</a></li>
    <li><a href="#" id='fun'>    Fun</a></li>
    <li><a href="#" id='life'>   Life</a></li>
  </ul>
</div>