jQuery在弹出窗口中触发点击事件时出现故障

Question

我有一个相当简单的页面，里面有几个设计成弹出窗口的div。。。

我对位于jQuery填充的弹出窗口中的.closediv有问题。单击btn。。jquery打开一个div，然后用另一个div的内容填充它。

这一切都如预期的那样。

弹出窗口中有一个.closediv，设计成一个关闭按钮。

$('body, .close').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$('#info').html('').removeClass('pop').fadeOut(300);
$('#pup').children('h1').html('');
$('#pup').fadeOut(300);
$('#cov').fadeOut(300);
console.log('clk');
});

当.closediv被硬编码到弹出窗口中时，这非常有效。。但当内容从其他地方填充时，它将在中不起作用。

有人能告诉我我错过了什么吗？

---

// included so snippet functions....
var cards = $(".smpl");
cards.each(function(i) {
var im = $(this).attr('data-im');
var fadeTime = 180;
$(this).css('background-image', 'url(_core/img/p/' + im + ')')
$(this).delay(fadeTime * i).fadeIn(fadeTime);
});
// loaded #info with content from other divs
$('.about, .cont').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var wht = $(this).attr('data-t');
$('#info').removeClass('pop').html(''); //empty's info popup if its present
$('#pup').hide(); //hides other popup if its present
$('#cov').fadeIn(300);
$('#info').addClass('pop').html($(wht).html()).fadeIn(300);
console.log(wht);
});
// Should close all popups - FAIL for the #info .close div
// ###### this is where something is not right or borken...
$('body, .close').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$('#info').html('').removeClass('pop').fadeOut(300);
$('#pup').children('h1').html('');
$('#pup').fadeOut(300);
$('#cov').fadeOut(300);
console.log('clk');
});
$('#info').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('#pup').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
//This opens #pup div
$('.sp, .ai, .ot').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var imgsrc = $(this).attr('data-im');
var longDes = $(this).children('.dspt').attr('data-ld');
$('#cov').fadeIn(300);
$('#pup').addClass('pop');
$('#pup h1').html(longDes);
$('#pup').css('background-image', 'url(_core/img/p/' + imgsrc + ')').fadeIn(300);
});

.nav {
position: absolute;
right: 30px;
top: 20px;
list-style: none;
z-index: 9997;
}
.nav a:link,
.nav a:visited {
display: block;
transition: all 0.5s;
font-size: 13px;
line-height: 22px;
width: 76px;
text-transform: uppercase;
background: #07e;
color: #fff;
padding: 2px 5px;
border-radius: 3px;
height: 25px;
position: relative;
right: 20px;
cursor: pointer;
margin: 5px 0;
text-align: center;
box-shadow: 0 -2px 0 #fff;
}
.smpl {
overflow: hidden;
position: relative;
float: left;
border: 1px solid #aaa;
padding: 0;
display: none;
width: 100%;
max-width: calc((100% - 60px) / 10);
height: auto;
margin: 5px 5px 0 0;
background-size: cover;
background: #aaa;
}
h1.dspt {
position: absolute;
bottom: -50px;
width: 100%;
background: #2d2d2d;
color: #fff;
text-transform: none;
padding: 5px;
opacity: 0;
transition: all .5s;
}
.smpl:hover h1.dspt {
bottom: 0;
transition: all .5s;
background: #07e;
opacity: 0.8;
}
#over,
#cov {
width: 100%;
height: 100%;
background: #aaa;
display: none;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 9991;
opacity: 0.8;
}
#cov {
background: #fffs;
opacity: 0.9;
}
#pup,
#info {
width: 150px;
height: 150px;
background-color: #fff;
display: none;
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translate(0, -50%);
z-index: 9998;
opacity: 1;
margin: 0 auto;
border: 1px solid #aaa;
box-shadow: 0 5px 50px #666;
overflow: hidden;
display: none;
}
#pup h1.dspt {
position: absolute;
bottom: -50px;
width: 100%;
background: #2d2d2d;
color: #fff;
text-transform: none;
font-size: 16px;
padding: 15px 40px;
opacity: 0;
transition: all .5s;
text-align: left;
text-shadow: 2px 0 1px #000;
}
#pup:hover h1.dspt {
bottom: 0;
transition: all .5s;
background: #2d2d2d;
opacity: 0.8;
}
#info {
padding: 10px;
overflow-Y: auto;
border: 3px solid #333;
border-radius: 6px;
}
.pop .close {
position: absolute;
top: -40px;
right: -40px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #333;
color: #fff;
opacity: .5;
font-weight: bold;
text-align: center;
font-size: 16px;
line-height: 30px;
transition: all .5s;
cursor: pointer;
}
.pop:hover .close {
top: 10px;
right: 10px;
transition: all .5s;
background: #2d2d2d;
opacity: 0.8;
z-index: 9999;
}
#about,
#cont {
display: none;
background: #fff;
padding: 10px;
position: relative;
text-align: left;
margin: 10px 0 0 0;
border: 1px solid #ddd;
border-radius: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cov"></div>
<div id="info"></div>
<div id="pup">
<h1 class="dspt"></h1>
<div class="close">X</div>
</div>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="large-12 medium-12 cell masthead">
<div class="base">
<ul class="nav">
<li><a href="#" class="nbtn about" data-t="#about">about</a></li>
<li><a href="#" class="nbtn cont" data-t="#cont">contact</a></li>
</ul>
</div>
</div>
<div class="large-12 medium-12 cell" id="content">
<div id="about">
<div class="close">X</div>
<h4>about - Info Div</h4>
<p>Hover to see close btn, but it fails to function.
<p>
</div>
<div id="cont">
<div class="close">X</div>
<p>Contact - Info div</p>
<p>Hover to see close btn, but it fails to function.
<p>
</div>
<div class="grid-x grid-padding-x">
<div class="large-12 medium-12 cell inner">
<div class="smpl sp" data-im="h1pc_15px.png">
<div class="zm"></div>
<h1 class="dspt" data-ld="#pup div">Pup Div</h1>
<img alt="H" src="_core/img/p/_blank.png"></div>
</div>
</div>
</div>
</div>
<!-- // grid padding -->
</div>
<!-- //grid container -->

上面的代码段

• 如果单击[断开]图像
• #pup弹出窗口显示
• 在#pup(灰色区域(外单击将删除弹出窗口(-GOOD(
• 单击.closediv将删除弹出窗口(-GOOD(

---

• 点击"；关于"；或"；"联系人"；在标题中
• #info弹出窗口显示
• 点击外部的，弹出窗口(灰色区域(关闭(-GOOD(
• 简单地单击.closediv不会触发关闭事件(-FAIL(

---

建议是由于body上的点击事件和stopPropagation。。。所以我测试了。。。

$('.about, .cont').on('click', function (e) {
e.preventDefault();
//e.stopPropagation();
var wht = $(this).attr('data-t');
$('#info').removeClass('pop').html(''); //empty's info popup if its present
$('#pup').hide(); //hides other popup if its present
$('#cov').fadeIn(300);
$('#info').addClass('pop').html($(wht).html()).fadeIn(300);
console.log(wht);
});
$('#cov, .close').on('click', function(e) {
e.preventDefault();
//e.stopPropagation();
$('#info').html('').removeClass('pop').fadeOut(300);
$('#pup').children('h1').html('');
$('#pup').fadeOut(300);
$('#cov').fadeOut(300);
console.log('clk');
});

问题仍然存在。

Answer 1

如果您将点击功能更改为：$(document).on('click', 'body', '.close', function()，它就会工作

您还需要删除此位：

$('#info').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});
$('#pup').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
});