Using .serialize() on a dynamically loaded form?

Using .serialize() on a dynamically loaded form?

I'm creating an inventory management back-end for an intranet application.  The user has to indicate whether the item is "Non-Inventory" or "Inventory".  Each item type has it's own set of fields so this distinction loads the proper data entry form via:

  1. $("input[name^='ProdType']").click(function(){
  2.    $('#EntryForm').hide('slow').html('');
  3.    var ItemType =$(this).attr('value');
  4.    var pageLoad;
  5.    if(ItemType=='noninventory'){
  6.      pageLoad = 'noninventory_form.html';
  7.    }else{
  8.      pageLoad = 'inventory_form.html'
  9.    }
  10.    $('#EntryForm').load(pageLoad,function(){
  11.        $( 'textarea.editor' ).ckeditor();
  12.    }).show('slow');
  13. });
The form loaded via inventory_form.html is:
  1. <form>
  2.   <h2 align="center">Inventory Item</h2>
  3.       <div class="label">Manufacturer's #</div>
  4.       <div><input id="ManufacturerPartNumber" name="ManufacturerPartNumber" type="text" size="35" maxlength="31" /></div>
  5.       <div class="label required">Item Name:</div>
  6.       <div><input id="Name" name="Name" type="text" class="required" size="35" maxlength="159" value="" /></div>
  7.       <div class="label required">Unit Cost:</div>
  8.       <div><input id="PurchaseCost" name="PurchaseCost" type="text" class="required" size="6" value="" /></div>
  9.       <div class="label required">Retail Price:</div>
  10.       <div><input id="SalesPrice" name="SalesPrice" type="text" class="required" size="6" value="" /></div>
  11.       <div class="label top required">Description:</div>
  12.       <div colspan="10"><textarea id="SalesDesc" name="SalesDesc" class="editor" cols="80" rows="2"></textarea></div>
  13.       <div class="label required">Product Status:</div>
  14.       <div>
  15.         <input id="IsActive" name="IsActive" type="radio" value="0" checked="checked" />Inactive
  16.         <input id="IsActive" name="IsActive" type="radio" value="1" />Active
  17.       </div>
  18.       <div colspan="20" align="center">
  19.         <input id="btnInventory" type="submit" value="Add Inventory Item" />
  20.         <input id="btnCancel" type="button" value="Cancel" />
  21.       </div>
  22. </form>
I thought I could simply use the .serialize() method like so:
  1. $('form').submit(function() {
  2.   alert($('form').serialize());  //alert simply to show that the form was serialized.
  3.   return false;
  4. });
However this does not work.  The form is simply submitted right back to the page.  The alert is never triggered.  Do I need to bind an event to the form or the form's submit button?  Bit lost here.

Thanks for any guidance.