我正在尝试执行以下操作：
我在第一次点击后通过JQuery插入一个类，并尝试使用该类来关闭叠加层。
我看到动态生成的类需要使用.on（）方法才能使点击生效。
请参阅我在下面创建的代码和小提琴链接：
$("#nav-icon").click(function() {
$(this).toggleClass('open');
$(".overlay").fadeIn(800);
});
$('#nav-icon').on('click', '.open', function() {
$(".overlay").fadeOut(800);
});
https://jsfiddle.net/oxd8k1nx/1/
任何人都可以告诉我，我在这里做错了。
非常感谢所有帮助和时间。
答案 0 :(得分：1)
.open不是#nav-icon的孩子。但是，它是完全相同的元素
https://jsfiddle.net/oxd8k1nx/2/
$('body').on('click', '#nav-icon.open', function() {
顺便说一句，你可以更简单：
$(document).ready(function(){
$("#nav-icon").click(function() {
if ($(this).hasClass('open')) {
$(".overlay").fadeOut(800);
}
else {
$(".overlay").fadeIn(800);
}
$(this).toggleClass('open');
});
});#container {
margin: 0 auto;
width: 960px;
}
/* HEADER */
header {
width: 100%;
}
header img {
position: relative;
}
/* OVERLAY */
.overlay {
background: #000;
display: none;
height: 100%;
left: 0;
padding: 30px 1%;
position: fixed;
top: 0;
width: 100%;
z-index: 50;
}
/* NAVIGATION */
nav {
position: relative;
text-align: left;
width: 100%;
}
nav li {
display: inline;
margin: 0 20px 0 0;
}
nav li a {
color: #fff;
}
#container {
margin: 200px 0 0 0;
}
p {
font-size: 20px;
line-height: 26px;
margin: 0 0 20px 0;
}
/* BURGER STYLES */
#nav-icon {
cursor: pointer;
height: 45px;
position: absolute;
right: 20px;
top: 20px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
width: 60px;
z-index: 100;
}
#nav-icon span {
background: #eb3795;
display: block;
height: 9px;
opacity: 1;
position: absolute;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
width: 50%;
}
#nav-icon span:nth-child(even) {
border-radius: 0 9px 9px 0;
left: 50%;
}
#nav-icon span:nth-child(odd) {
border-radius: 9px 0 0 9px;
left:0px;
}
#nav-icon span:nth-child(1), #nav-icon span:nth-child(2) {
top: 0px;
}
#nav-icon span:nth-child(3), #nav-icon span:nth-child(4) {
top: 18px;
}
#nav-icon span:nth-child(5), #nav-icon span:nth-child(6) {
top: 36px;
}
#nav-icon.open span {
background: #fff;
}
#nav-icon.open span:nth-child(1),#nav-icon.open span:nth-child(6) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon.open span:nth-child(2),#nav-icon.open span:nth-child(5) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon.open span:nth-child(1) {
left: 5px;
top: 7px;
}
#nav-icon.open span:nth-child(2) {
left: calc(50% - 5px);
top: 7px;
}
#nav-icon.open span:nth-child(3) {
left: -50%;
opacity: 0;
}
#nav-icon.open span:nth-child(4) {
left: 100%;
opacity: 0;
}
#nav-icon.open span:nth-child(5) {
left: 5px;
top: 29px;
}
#nav-icon.open span:nth-child(6) {
left: calc(50% - 5px);
top: 29px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<header>
<div class="overlay">
<nav>
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">PORTFOLIO</a></li>
<li><a href="">SERVICES</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</nav>
</div> <!-- .overlay -->
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div> <!-- #nav-icon -->
</header>
<div id="container">
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at sapien dolor. Donec eleifend at arcu a pretium. Phasellus pulvinar placerat elit, ac fringilla risus feugiat id. Nullam rutrum sodales tellus, in sagittis libero. Mauris semper gravida dui, nec fermentum odio. Suspendisse varius sem libero, ac varius nisl molestie non. Sed nec efficitur enim. Etiam sem ex, luctus in facilisis ac, ultrices in magna. Cras dolor sapien, mollis lacinia euismod eu, convallis id ipsum. In ligula quam, sagittis et rutrum vitae, dignissim eu orci.</p>
</div> <!-- #main -->
<footer>
</footer>
</div> <!-- #container -->
答案 1 :(得分：1)
在您之前的代码中，即使附加了一个开放类，您也会调用第一个处理程序。所以它再次切换它，因此你的第二个处理程序不会被触发。
$(document).ready(function(){
$(document).on('click', "#nav-icon:not('.open')", function() {
alert(1);
$(this).toggleClass('open');
$(".overlay").fadeIn(800);
});
$(document).on('click', '#nav-icon.open', function() {
alert(2);
$(".overlay").fadeOut(800);
});
});