Question

ran into a problem this morning. I wrote the following lines:

var Markup = '<div id="overlay"><h1>Test</h1><a id="close">Close</a></div>';

    $(document).ready(function() {
        $("#link").click(function() {
            $("body").append(Markup);
            $("#overlay").delay(500).animate({"opacity":"0.97"},2000);
        });

        $("#close").click(function() {
            $("#overlay").delay(500).animate({"opacity":"0"},2000);
            $("body").remove(Markup);
        });
    });

When I click on #link the overlay appears perfectly but the #close link doesn’t work. Just nothing happens. The markup is also still there after clicking #close.

Any suggestions?

Answer 1

The .click() only work on elements that are in the DOM when the method is called, which in your case is when the DOM is ready. You need to use .on() instead and delegate the click-event to a parent element (prior to version 1.7, you used .delegate() instead of .on()).

$("body").on("click", "#close", function() {
    $("#overlay").delay(500).animate({"opacity":"0"}, 2000, function () {
        $(this).remove();
    });
    // Prevent the default click-behavior
    return false;
});

Notice

You should remove the content in the callback that is executed when the animation is completed. Otherwise there is a chance that the elements get removed before the animation is completed.