Using Jquery, How do I submit a form that was created with AJAX?

Question

I have a 2 part form.

The 1st form is submitted via $.post and (if all goes right), is replaced by a dynamically generated form from php. The idea behind this being that the 1st form creates an entry and the number of related images for said item. A new form is generated to upload said images.

My problem is that my newly generated form is not getting processed. If submit the form via the old onClick="" function, the dynamically generated file fields are ignored.

I'm pretty new to Jquery/AJAX, so I may not be doing this correctly, but how can I get Jquery to pay attention to my 2nd (dynamically generated) form?

1st Form:

<form name="addinv" id="addinv" action="admin_process.php" method="post">
          <fieldset>
            <legend>Add Inventory</legend>
            <input type="hidden" name="actiontotake" id="actiontotake" value="none" />
            <table width="400" border="0">
              <caption>
              Add Inventory Form Layout Table
              </caption>
              <tr>
                <td><strong>Price</strong></td>
                <td><input type="text" name="price" id="price" tabindex="1" /></td>
              </tr>
              <tr>
                <td><strong>Manufacturer</strong></td>
                <td><input type="text" name="mfg" id="mfg" tabindex="2" /></td>
              </tr>
              <tr>
                <td><strong>Model</strong></td>
                <td><input type="text" name="model" id="model" tabindex="3" /></td>
              </tr>
              <tr>
                <td><strong>Serial Number</strong></td>
                <td><input type="text" name="sn" id="sn" tabindex="4" /></td>
              </tr>
              <tr>
                <td><strong>Year</strong></td>
                <td><input type="text" name="year" id="year" tabindex="5" /></td>
              </tr>
              <tr>
                <td><strong>Size (Dimensions)</strong></td>
                <td><input type="text" name="dimensions" id="dimensions" tabindex="6" /></td>
              </tr>
              <tr>
                <td><strong>Bedrooms</strong></td>
                <td><input type="text" name="beds" id="beds" tabindex="7" /></td>
              </tr>
              <tr>
                <td><strong>Bathrooms</strong></td>
                <td><input type="text" name="baths" id="baths" tabindex="8" /></td>
              </tr>
              <tr>
                <td><strong>Range Type</strong></td>
                <td><input type="text" name="range" id="range" tabindex="9" /></td>
              </tr>
              <tr>
                <td><strong>Siding Type</strong></td>
                <td><input type="text" name="siding" id="siding" tabindex="10" /></td>
              </tr>
              <tr>
                <td><strong>Roof Type</strong></td>
                <td><input type="text" name="roof" id="roof" tabindex="11" /></td>
              </tr>
              <tr>
                <td><strong>Furnace Type</strong></td>
                <td><input type="text" name="furnace" id="furnace" tabindex="12" /></td>
              </tr>
              <tr>
                <td><strong>Features &amp; Benefits</strong></td>
                <td><textarea name="fandb" id="fandb" tabindex="13"></textarea></td>
              </tr>
              <tr>
                <td><strong>Number of Pictures</strong></td>
                <td><input type="text" name="picnum" id="dimensions" tabindex="14" /></td>
              </tr>
              <tr>
                <td colspan="2" align="center"><input name="addinventorybutton" id="addinventorybutton" type="submit" value="Add Home" tabindex="15"/></td>
              </tr>
            </table>
          </fieldset>
        </form>

Jquery handler:

$(document).ready(
    function(){
        $("#addinventorybutton").click(
            function(){
               $("#actiontotake").val("Add Home");
               var dta = $("#addinv").serialize();
                           $.post("admin_process.php",dta,function(data){
                   $("div#form").html(data);
                           });
            return false;
        });
                    $("#addnewpicturesbutton").click(
            function(){
            $("#actiontotake").val("Add Picture");
            AddPic();
            return false;
        });
    });

2nd Form (via PHP & AJAX call):

<form name="addpictures" id="addpictures" enctype="multipart/form-data" method="post" action="admin_process.php">
        <fieldset><legend>Add Associated Images</legend>
        <?php 
            for($i=0;$i<$pics;$i++)
            {
                echo("<input type='file' name='pic".$i."' /><br />\n");
            }
            ?>
            <input type="hidden" name="actiontotake" id="actiontotake" value="none" />
            <input type="hidden" name="inventory_id" id="inventory_id" value="<?php echo $newid; ?>">
            <input type="button" name="addnewpicturesbutton" id="addnewpicturesbutton" value="Add Pictures to new home">
            </fieldset>
            </form>

Answer 1

You need to freshen up the form bindings after you load the new one. Call

$("#addnewpicturesbutton").click(
    function(){
        $("#actiontotake").val("Add Picture");
        AddPic();
        return false;

in the callback for the first function.

Answer 2

I'm not entirely sure, but I suspect it's that the second form wasn't present when the DOM was constructed. If you try:

$('#formID').live('submit',
function() {
  // do whatever
}
);

I think it should work.

Answer 3

use .live() method to submit your 2nd form:

$('#addnewpicturesbutton').live('click', function() {
      $("#actiontotake").val("Add Picture");
      AddPic();
      return false;
});

.live() attach a handler to the event for all elements which match the current selector, now or in the future.