PrependTo，然后在点击不工作时删除自己

Question

我创建了这个jQuery：

        $(function(){

            $("a img").click(function() {
               $("<div id=\"overlay\"></div>").hide().prependTo("body").fadeIn(100);

                $("body").css({
                    'overflow': 'hidden'
                }); 
            });

            $("#overlay").on("click", function() {
                $(this).remove();
            });

        })();

当我点击img标记内的anchor时，会出现重叠div。但现在，在叠加层div出现后，我想让它在点击它时消失（从页面中移除）。

我尝试了上面的代码，但它不知何故不起作用。此外，覆盖div占据了浏览器的整个视口，如果有任何帮助的话。

有人可以帮我解决这个问题吗？

Answer 1

您需要委托文档就绪事件之前存在的元素。叠加不会。

jQuery('body').on('click','#overlay'.function() {
            $(this).remove();
        });