我想弄清楚如何使用 .remove() jQuery 方法删除弹出式 div 元素。当我单击具有“.popUpTrigger”类的元素时，我有一个附加到#main div 的div。然后，当我单击弹出窗口本身时，我想删除这个附加的 HTML 代码。
这是我的 HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<meta charset="utf-8"/>
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jscript.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Title</title>
</head>
<body>
<div id="main">
<button class="popUpTrigger">Click to trigger the popUp!</button>
</div>
</body>
</html>
我的 jscript.js:
function popUpCreate(idToAppend, popUpCode) {
$(function() {
$(idToAppend).append(popUpCode);
});
}
$(function() {
$(".popUpTrigger").click(function() {
popUpCreate("#main", "<div class='popUpBg'><div class='popUpItSelf'>Hello!</div></div>");
});
});
$(function() {
$(".popUpBg").click(function() {
$(".popUpBg").remove();
});
});
style.css 文件:
.popUpBg {
position:fixed;
z-index:999999;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
cursor:pointer;
}
.popUpItSelf {
position:fixed;
z-index:9999999;
width:400px;
height:200px;
text-align:center;
top:50%;
left:50%;
margin-left:-401px;
margin-top:-301px;
background:white;
border: 1px solid black;
font-size: 4em;
color:black;
font-weight:bold;
padding:200px;
}
但这不起作用，我希望在单击 .popUpBg(弹出背景)时删除弹出窗口。
我怎样才能做到这一点？
最佳答案
您在点击一个尚不存在的对象(背景)时附加一个处理程序。
首先，我重写你自己的代码以提高可读性
function popUpCreate(idToAppend, popUpCode) {
$(idToAppend).append(popUp);
}
$(".popUpTrigger").click(function() {
popUpCreate("#main", "<div class='popUpBg'><div class='popUpItSelf'>Hello!</div></div>");
});
$(".popUpBg").click(function() {
$(".popUpBg").remove();
});
现在，我进行更正
function popUpCreate(idToAppend, popUpCode) {
$(idToAppend).append(popUp);
$(".popUpBg").click(function() {
$(".popUpBg").remove();
});
}
$(".popUpTrigger").click(function() {
popUpCreate("#main", "<div class='popUpBg'><div class='popUpItSelf'>Hello!</div></div>");
});
关于javascript - 如何使用 jQuery 删除附加有 .append() 方法的弹出式 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20925834/