Jquery not interacting with ajax .load content

Jquery not interacting with ajax .load content

Hi I've created a simple example of a problem I'm having:

HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8.     $(function() {
            $("a").click(function() {
                $("#Array").load('Array.php');
            });


  9.         $("#Button").click(function() {
                $(this).hide(1000);
            });

  10.     });
  11. </script>
  12. </head>

  14. <body>
  15.     <a href="#">Button</a>
  16.     <div id='Button'>3345636</div>
  17. </body>
  18. </html>
PHP (Array.php)
  1. <?php
  2.     echo "<div id='Button'>1234567890</div>";
  3. ?>
When I click on the "Button" link(<a href="#">Button</a>) the following text appears "1234567890" >>This works perfectly.
When i click on the text "3345636" it hides over one second as defined in the Java Script >>This works perfectly.

The problem is when I click on the new text "1234567890". Even though it has an id="Button" it doesn't hide at all?