关闭覆盖层，除非；特别"；使用jQuery/Javascript单击Div

我有一个名为“MyDiv”的div。单击此div时，将显示一个附加了“MyDiv_subDiv”的覆盖。当用户单击覆盖时，视图应该消失，但如果iser单击“MyDiv_subDiv”则不会消失

我在这里发现了一个类似的问题并进行了尝试，下面是我的代码：

var$MyDiv=$（'#MyDiv'）；
变量$overlay=$（''）；
变量$MyDiv_subDiv=$（'\n\
\n\
\n\
某些内容
\n\
\n\
\n\
');
//添加覆盖层
$（“正文”）。追加（$overlay）；
//单击“覆盖”时
$overlay。单击（函数（）{
//隐藏覆盖层
$overlay.hide（）；
$overlay.empty（）；
});
$MyDiv.click（函数（事件）{
event.preventDefault（）；
$overlay.show（）；
$overlay.append（$MyDiv_subDiv）；
});
$MyDiv_subDiv.单击（函数（事件）{
event.stopPropagation（）；
});
#覆盖{
背景：rgba（0,0,0,0.7）；
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
显示：无；
文本对齐：居中；
}
.subDiv{
宽度：400px；
高度：125px；
保证金：0自动；
}
#MyDiv_subDiv{
背景颜色：浅绿色；
}
#MyDiv{
宽度：185px；
高度：80px；
背景颜色：浅灰色；
}

单击以显示MyDiv\u细分曲面
来自

为了避免内存泄漏，jQuery删除了其他结构，如数据
和子元素中的事件处理程序，然后删除
元素本身

如果要删除元素而不破坏其数据或事件
处理程序（以便以后可以重新添加），请改用.detach（）

因此，您必须使用
.detach
来保留事件

由于
.detach
应用于self，而不是child，您必须进行更改

$overlay.empty（）至
$MyDiv_subDiv.detach（）
或
$overlay.children（）.detach（）

或者，您可以在每次将事件附加到
$overlay
时重新绑定该事件


var$MyDiv=$（'#MyDiv'）；
变量$overlay=$（''）；
变量$MyDiv_subDiv=$（'\n\
\n\
\n\
某些内容
\n\
\n\
\n\
');
//添加覆盖层
$（“正文”）。追加（$overlay）；
//单击“覆盖”时
$overlay。单击（函数（）{
//隐藏覆盖层
$overlay.hide（）；
$overlay.children（）.detach（）；
});
$MyDiv.click（函数（事件）{
event.preventDefault（）；
$overlay.show（）；
$overlay.append（$MyDiv_subDiv）；
});
$MyDiv_subDiv.单击（函数（事件）{
event.stopPropagation（）；
});
#覆盖{
背景：rgba（0,0,0,0.7）；
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
显示：无；
文本对齐：居中；
}
.subDiv{
宽度：400px；
高度：125px；
保证金：0自动；
}
#MyDiv_subDiv{
背景颜色：浅绿色；
}
#MyDiv{
宽度：185px；
高度：80px；
背景颜色：浅灰色；
}

单击以显示MyDiv\u细分曲面
我发现您的示例很有效。你确定你有什么问题吗？它只在第一次使用时起作用