li click 上未处理点击事件答案

【问题标题】：Click event not handled on li clickli click 上未处理点击事件
【发布时间】：2018-03-28 07:40:57
【问题描述】：

我正在尝试在 li 上启动点击事件，但它似乎不起作用。

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

    .wrapper {
    	display: grid;
        grid-template-columns: 2fr 7fr 2fr;
        grid-template-areas: 
          "left header  header"
          "left    content ad"
          "left    content ad"
          "footer footer  footer"
       }
    
    .header{
    	grid-area:header;
    	position: sticky;
    	top:0;
    	background-color: red;
    	height: 100px;
    	text-decoration: none;
    }
    
    .left-sidebar{
    	grid-area:left;
    	top:0;
    	background-color: #22262A;
       	position: sticky;
        height: 100vh;
        padding:0px 0px 0px 0px;
        font-size: 26px;
        text-align:center;
    }
    
    .left-sidebar a{
    	padding: 15px 0px 15px 0px;
    	color:#000;
    	display: block;
    	text-decoration: none;
    }
    
    .nav a:hover{
    	background-color: #272b30;
    }
    
    .ad{
    	grid-area:ad;
    	background-color: navy;
    }
    .content{
    	grid-area:content;
    	padding: 5px 5px 5px 5px;
    	background-color: yellow;
    	height: 100vh;
    }
    
    .footer{
    	grid-area:footer;
    	background-color: grey;
    	height: 125px;
    }
    
    #logo{
    	margin-top: 50px;
    	margin-bottom: 50px;
    }
    
    .no-list{
    	display: block;
    	text-decoration: none;
    }
    
    #menu ul li{
    	background-color: yellow;
    	z-index: 500;
    }

<html>
<head>
	<link rel="stylesheet" type="text/css" href="assets/css/style.css">
	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script src="assets/js/main.js"></script>
</head>
<body>
<div class="wrapper">
	<div class="header">
	</div>
	<div class="ad">advertisements</div>
	<div class="left-sidebar">
		<nav id="menu">
			<a href="#" data-target="home" class="" id="logo">Sylent</a>
			<ul class="nav" id="test2">
				<li id="getBierTest" onclick="alert()">try</li>
			</ul>
		</nav>
	</div>
	<div class="content">main content div</div>
	<div class="footer">footer div</div>
</div>
</body>
</html>

我在另一个项目中使用了它并且它有效。但是这次我使用的是 CSS 网格，但突然间它没有了。有什么想法可能导致这种情况吗？提前致谢。

【问题讨论】：

你得到什么错误？ sn-p 正在工作，所以看起来你的设置有问题。确保页面加载后加载js。
看来 sn-p 正在工作。
I can't see your code to fail ..?
你的 sn-p 工作正常
我在文档准备好后添加了 JS @Kristianmitk

标签： javascript jquery html css css-grid

【解决方案1】：

我已将您的代码复制到 Codepen 中： https://codepen.io/chrisboon27/pen/NYYNvJ?editors=1111 我能看到的唯一问题是触发了两个警报。第一个是空的，但第二个有效。发生这种情况是因为除了通过 jQuery 添加事件：

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

你也在你的 html 中调用 alert inline，但没有任何参数，所以你只会得到一个空的 alert：

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

如果您删除内联警报，它可能对您有用。

【讨论】：

【解决方案2】：

您的代码绝对正确。但始终确保在页面完全加载后加载 JS。使用$(document).ready() 函数来做到这一点。

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

【讨论】：

明白了！忘记添加是在问题中。

【解决方案3】：

如果您尝试针对特定的 li，请尝试此操作

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

更优化的解决方案可以是

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

希望对你有帮助

【讨论】：

这在功能上与 sn-p 有何不同？他的代码确实有效，你只是在为它发布一个优化。
针对什么进行了优化？
我吃苹果...苹果被我吃掉了:D
这是一个优化程度较低的“解决方案”，它将处理被点击的每一个元素，但忽略那些与选择器不匹配的元素。这是一个糟糕的建议，不相关。
还请说明与选择器不匹配的如何处理？