Javascript 单击时未处理的单击事件

我试图在

li

上启动一个单击事件，但它似乎不起作用

$（文档）.ready（函数（）{
$（“#菜单ul li”）。单击（函数（）{
警报（this.id）；
});
});
.wrapper{
显示：网格；
网格模板列：2fr 7fr 2fr；
网格模板区域：
“左标题”
“左内容广告”
“左内容广告”
“页脚页脚”
}
.标题{
网格区域：标题；
位置：粘性；
排名：0；
背景色：红色；
高度：100px；
文字装饰：无；
}
.左侧边栏{
网格区域：左侧；
排名：0；
背景色：#22262A；
位置：粘性；
高度：100vh；
填充：0px 0px 0px 0px；
字号：26px；
文本对齐：居中；
}
.左侧边栏a{
填充：15px 0px 15px 0px；
颜色：#000；
显示：块；
文字装饰：无；
}
.导航a:悬停{
背景色：#272b30；
}
.广告{
网格面积：ad；
背景色：海军蓝；
}
.内容{
网格区域：内容；
填充物：5px 5px 5px；
背景颜色：黄色；
高度：100vh；
}
.页脚{
网格区域：页脚；
背景颜色：灰色；
高度：125px；
}
#标志{
边缘顶部：50px；
边缘底部：50px；
}
.没有名单{
显示：块；
文字装饰：无；
}
#菜单ulli{
背景颜色：黄色；
z指数：500；
}

广告

试试看

主要内容组
页脚分区
如果您试图针对特定的li，请尝试此操作

$("#menu ul li").on('click', function(){
   alert(this.id);
});

可以选择更优化的解决方案

$(document).on('click', '#menu ul li',function(){
   alert(this.id);
});

希望这将帮助您
您的代码绝对正确。但始终确保在页面完全加载后加载JS。使用函数来完成此操作

$( document ).ready(function() {
   $("#menu ul li").click(function(){
      alert(this.id);
   });
});

我已将您的代码复制到代码笔中：
我能看到的唯一问题是有两个警报发出。第一个是空的，但第二个可以工作。发生这种情况的原因除了通过jQuery添加事件外，还有：

$( document ).ready(function() {
   $("#menu ul li").click(function(){
      alert(this.id);
   });
});

您也在html中内联调用警报，但没有任何参数，因此您只会得到一个空警报：

<li id="getBierTest" onclick="alert()">try</li>

试试看

---

如果删除内联警报，它可能适合您。

您会遇到什么错误？代码段正在运行，因此您的设置似乎有问题。确保在加载页面后加载js。代码段似乎正在工作。。？你的代码片段正在工作我在文档准备好后添加了JS@KristianmitkHow这与代码片段的功能不同吗？他的代码确实有效，你只是发布了一个优化。优化了什么？我吃苹果。。。苹果被我吃掉了：这是一个优化程度较低的“解决方案”，可以处理被点击的每个元素，但忽略与选择器不匹配的元素。这是一个不好的建议，不相关。请解释如何处理与选择器不匹配的人？明白了！忘了补充一下，这是个问题。