我可以添加叠加层,但我无法删除它(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方法将处理程序绑定到匹配的所有元素#overlay,无论何时创建它们.

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

要解决此问题,fadeOut请remove在动画结束后使用's callback参数进行调用.

例如:

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