Jquery .submit() not working with Dynamically Created Form

I have a Dynamically Created Form which I can't get to submit.
The Form is displayed on screen and you can enter data just fine but when I press the "save" button nothing happens. How can I adjust my code so that this works?? By the way, his same code with a normal Typed in Form works just fine.

Thanks in advance RP.

Code:<!-- ======= BUTTON TO SUBMIT FORM ==================

<div class='butpos' >
<button type="submit" id='addFormButton' form="addForm" >Save</button>
<button type="button" id="bak">Go Back</button>
</div>

// SUBMIT FORM DATA TO DATABASE

$("#addForm").submit(function(event) {
event.preventDefault();

var request=$.ajax ({
url: "AccountAdd.php",
type: "POST",
data: $('#addForm').serialize(),
dataType: "text"
})

<!-- ============= DYNAMICALLY CREATE ENTRY FORM =============== -->

<script type="text/javascript" >

$(document).ready(function () {

// get field names from database for use as column headers
fieldnames=<?php echo json_encode($fieldNames); ?>;

// create form
$("<form id='addForm' name='addForm' method='post' action='#'>\n").appendTo('div#form1');

// add 'id' that is auto-increment so don't allow entry
str="<p><label for='"+fieldnames[0]+"'>"+fieldnames[0]+" </label>\n";
str+="<input class='hov body' id='i1' type='text' readonly name='"+fieldnames[0]+"' value='No Entry' ></p>\n";
$(str).appendTo('div#form1');

// add remaining elements
for(var i=1; i<(fieldnames.length); i++) {
str="<p><label for='"+fieldnames[i]+"'>"+fieldnames[i]+" </label>\n";
str+="<input class='hov body' id='i2' type='text' name='"+fieldnames[i]+"' ></p>\n";
$(str).appendTo('div#form1');
}

// terminate form creation
$("</form>").appendTo('div#form1');

});

</script>