div click event not working

jquery

Solution

Working solution at http://jsfiddle.net/ffK3u/1/

$(document).ready( function() {
                $('#show').click( function() {
                    $("<div id='fade'></div>").appendTo('body');
                    $('#fade').fadeIn('fast');
                });

                $(document).on("click","#fade", function() {
                    $('#fade').fadeOut("slow",function(){
                        $('#fade').remove();
                    });
                });
            });

Problem

I have this simple code that append a div inside the body, ``` <!DOCTYPE html> <html> <head> <script type="text/javascript" src='/libs/jquery/jquery.js'></script> <script> $(document).ready( function() { $('#show').click( function() { $("<div id='fade'></div>").appendTo('body'); $('#fade').fadeIn('fast'); }); $('#fade').click( function() { $('#fade').remove('fast'); }); }); </script> </head> <body> <div> <input type="button" value="show" id="show"/> </div> </body> </html> ``` css ``` #fade { display: none; background: black; opacity:0.4; filter:alpha(opacity=50); z-index: 1; position: fixed; left: 0; top: 0; width: 100%; height: 100%; } #window { width: 440px; height: 356px; background: white; position:fixed; left:50%; top:30%; margin:-70px 0 0 -245px; z-index: 2; } ``` Appending my div#fade is working fine, but my click event on #fade isn't working. I looks simple but I didn't know why isn't working fine.

Original source