Trouble with Forms loaded via AJAX

Trouble with Forms loaded via AJAX

I'm having trouble processing forms that are loaded into a page via AJAX.  I am unable to get jQuery to listen for events on the loaded forms.

  1. <html>
    <head>
    <title>Test</title>
    <script type="text/javascript" src="http://www.example.com/javascript/jquery-1.4.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){$("div#beta").load("http://www.example.com/beta1.html");});
    $(document).ready(function(){$("div#gamma").load("http://www.example.com/gamma1.html");});
    </script>
    </head>

    <body>
    <fieldset>
      <div id="beta">Loading, please wait...</div>
    </fieldset>
    <fieldset>
      <div id="gamma">Loading, please wait...</div>
    </fieldset>

    </body>
    </html>




















The HTML snippets beta1.html and gamma1.html are both forms.   For example:
  1. <form method=post action="http://www.example.com/beta1.cgi">
    <input type=text name="email_address">
    <input type=submit>
    </form>




When either of the forms is submitted, jQuery should intercept the submit and process it like an AJAX request, leaving the main page alone and only impacting the beta or gamma div.  The responses to both forms are additional HTML forms, that also need to be handled as AJAX. 

I've tried several methods to get jQuery to listen for events on the loaded forms, including liveQuery but I have been unable to get it to work. 

I would appreciate any pointers, recommendations, or code snippets to get this working.