Getting $.load to add html to dom?

Getting $.load to add html to dom?

According to the JQuery docs, using .load you can add HTML to the dom, and be able to manipulate it via your Jquery script.

However, in my load call; I cannot get Jquery to recognise any clicks from any input buttons my very basic HTML form.

So, in summary what I want is;

1. I click on link, it grabs the html and dumps it into the div
2. I click on any input form within my div and JQuery recongises it, and allows me to do things (events, animations, etc).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>A basic page</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en-gb" />
   <meta http-equiv="cache-control" content="no-cache" />
   <meta http-equiv="pragma" content="no-cache" />

   <script type="text/javascript" src="jquery-1.2.3.js"></script>
   <script type="text/javascript">
      /* <![CDATA[ */
         $(document).ready(function() {

            // default the div to be hidden and empty.
            $("#detail").hide().empty();

            // this loads an external file, and fades it into view.
            $(".box a").click(function(event){
               event.preventDefault;

               var href = $(this).attr('href');
               $("#detail").fadeIn(500).addClass("editbox");
               $("#detail").load(href);

               return false;
            });

            // this will produce an alert message whenever you press
            // on any input button.
            $("input").click(function(event){
               event.preventDefault;
               alert("cancel");
               return false;
            });         

         });
      /* ]]> */
   </script>
   <style type="text/css">
      body {
         font: 14px/18px Arial, Helvetica, sans-serif;
      }
      #detail {
         display: none;
      }
      .editbox{
         padding:5px;
         border:1px solid #acd373;
         background:#fafff3;
         margin-bottom: 10px;
      }
   </style>
</head>
<body>

<p class="box">
   <a href="editor.htm">Show External Form in Detail Div</a>
</p>

<!-- I want jquery to recognise clicks on input buttons within this div -->
<div id="detail"></div>

<!-- these input buttons are okay -->
<form action="#" method="post">
      <input type="submit" value="Save" />
      <input type="button" id="cancel" value="Cancel" />
</form>

</body>
</html>


<!-- A simple HTML form -->
<form name="editorForm" id="editorForm" method="post" action="#">
   <p>
      <label for="item">Item: <br />
         <input type="text" id="item" name="item" value="" />
      </label>
   </p>

   <p>
      <input type="submit" value="Save" />
      <input type="button" id="cancel" value="Cancel" />
   </p>
</form>


Also, I dunno about you, but I'm sick of the Google Groups forum for Jquery - you post a message and it never appears, which is very frustrating; also it does not give you a quick list of all your posts - so you end up searching for your own posts -- sometimes they aren't even there.

I hope this forum is more successful and rewarding to use!

With thanks!