javascript - 我可以添加叠加层，但无法删除它 (jQuery)

Question

此函数向整个浏览器屏幕添加具有以下属性的叠加层，

$('a.cell').click(function()    {
    $('<div id = "overlay" />').appendTo('body').fadeIn("slow");
});

#overlay
{
background-color: black;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
z-index: 100;
opacity: 0.5;
}

这个函数应该删除它。

$('#overlay').click(function()  {
    $(this).fadeOut("slow").remove();
});

但它似乎什么也没做，现在我的页面被黑色过度覆盖。删除有什么问题？

Answer 1

问题是，当您添加 click 处理程序时，没有任何覆盖，因此您将处理程序添加到一组空元素。

要解决此问题，请使用 live方法将您的处理程序绑定(bind)到所有匹配 #overlay 的元素，只要它们被创建。

此外，fadeOut 不是阻塞调用，因此它会在元素完成淡出之前返回。因此，您在元素开始淡出后立即调用remove。

要解决此问题，请使用 fadeOut 的回调参数在动画结束后调用 remove。

例如:

$('#overlay').live(function() { 
    $(this).fadeOut("slow", function() { $(this).remove(); });
});