Need help with append()

Need help with append()

Hello everyone. Plug-in noob here with what is probably a simple question.
I have a lightbox type plugin that I'm trying to make, but I'm getting stuck when trying to insert things into the dom.
Here is the code:

jQuery.fn.overlay = function() {
    $(this).click(function() {
        $('body').append('<div id="overlay"></div>');
        $('#overlay').fadeIn();
    });
};

This kinda does what it is supposed to. It just draws a semi transparent div on the screen.

The problem I am having is accessing it. I would assume that the new element has an ID of 'overlay', but when I check it with code like this I get no response:

$(function() {
      $('#overlay').click(function() {
            alert('moo');
      });
});

I can clearly see the div on the screen, but it's like there is no ID attribute to reference.
I apologize in advance if i did not explain well.

Does anyone have any ideas as to what I am doing wrong?