无序列表无法使用click -jQuery

Question

我有一个无序列表列表，我想添加一个事件监听器但由于某些原因它不会听取点击。

这是我的代码：

＆＃13;

＆＃13;

$('li.lists').on('click', function() {
  console.log('it listens here')
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="room-list" id="room-list">
  <div class="rooms">
    <h2><i class="fa fa-address-book-o"></i> Room List</h2>
  </div>
  <ul class="list-item-room">
    <li class="lists">
      <img src="images/hr_avatar.png">
      <div class="room-details">
        <div class="room-name">
          zzzzz........
        </div>
        <div class="status">
          <i class="fa fa-circle online"></i> online
        </div>
      </div>
    </li>
    <li class="lists">
      <img src="images/hr_avatar.png">
      <div class="room-details">
        <div class="room-name">
          lobby
        </div>
        <div class="status">
          <i class="fa fa-circle online"></i> online
        </div>
      </div>
    </li>
    <li class="lists">
      <img src="images/hr_avatar.png">
      <div class="room-details">
        <div class="room-name">
          zzzzz........
        </div>
        <div class="status">
          <i class="fa fa-circle online"></i> online
        </div>
      </div>
    </li>
    <li class="lists">
      <img src="images/hr_avatar.png">
      <div class="room-details">
        <div class="room-name">
          lobby
        </div>
        <div class="status">
          <i class="fa fa-circle online"></i> online
        </div>
      </div>
    </li>
  </ul>
</aside>

＆＃13;

＆＃13;

＆＃13;

假设这是必须的控制台日志，只要列表被点击，它就会在这里监听，但它没有。知道为什么吗？谢谢！