jQuery单击列表项不起作用

Question

我有以下HTML和JS / jQuery代码：

$(document).ready(function() {
$("#livesearch").on("click",  ".searchres", function(event){
    console.log('clicked');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="livesearch">
  <?php foreach($data as $i){?>
    <li class="searchres"><?php echo $i["name"];?></li>
    <?php } ?>
</ul>

这是填充输入表单后出现的下拉列表的一部分。

我想按下一个下拉列表.searchres，然后打印到控制台作为测试。

但是，这不是在控制台上打印。我在做什么错了？

详细信息

在我的php文件的开头，我有以下代码段，该代码段创建了一个“ livesearch”对象，该对象连接到我的数据库。

<?php
  require_once('livesearch.php');
  $livesearch = new livesearch();
  $data = null;

?>

我在这里声明$data=null是因为我不希望在加载时显示任何数据库字段。这可能是导致livesearch ID在加载时不存在的问题吗？