0

I have this piece of jQuery I created:

        $(function(){

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

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

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

        })();

When I click an img inside an anchor tag, the overlay div appears. But now, after the overlay div has appeared I want to make it disappear (remove from the page) when I click on it.

I tried the above code, but it somehow doesn't work. Also the overlay div occupies the entire viewport of the browser, if that is of any help.

Can somebody help me out on this?

1 Answer 1

1

You need to delegate to an element that exists before the document ready event. Overlay does not.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.