javascript - Ajax form submission on a form created using jquery -

i using table different rows , edit button on each row.

this edit button creates form using ajax / json fill form details depending on row clicked.

the problem comes when creating ajax form.

im using same method always, reason ajax submission not working on form , going process php page.

im wondering if because form not on page when javascript code ajax call loaded?

so example:

1) page loaded , included on page is:

<script type="text/javascript" src="admin/js/showuserdetailsform.js"></script> <script type="text/javascript" src="admin/js/saveuserdetails.js"></script> 

2) click edit, , showuserdetailsform.js creates form. form this:

$('<div id="admin-edituser-popup">'+   '<div id="login-popup-title">edit user:<button id="closeedituserform">close</button></div>'+   '<div id="login-popup-centre">'+     '<form class="edituserdetails-form" action="admin/process/saveuserdetails.php" method="post">'+         'editing details user:'+response.username+' , user id:'+response.userid+         '<input type="hidden" name="userid" value="'+response.userid+'">'+         '<input type="text" name="username" value="'+response.username+'">'+         '<input type="submit" value="save user">'+     '</form>'+   '</div>'+ '</div>').appendto('body'); 

3) click submit button, , correctly returns json looking (updatesuccess).

4) form not processed via ajax, going action is.

the code ajax call on save details is:

// javascript - save user details $(document).ready(function(){ // when form submitted $(".edituserdetails-form").submit(function(){     $.ajax({         type: "post",         url: "admin/process/saveuserdetails.php",         data: $(".edituserdetails-form").serialize(),         datatype: "json",         success: function(response){              if (response.updatesuccess) {                 alert('saved');             }          }     });     return false; }); }); 

i cannot see reasons why not working (cant find errors class names etc) , there not errors in javascript.

the thing unsure of fact form created after code loaded?

thanks!

for newly created dom element handlers, should use jquery's on().

for issue, should replace $(".edituserdetails-form").submit(function(){ $("body").on('submit', '.edituserdetails-form', function(){

last not least, @brunis right - should add event.preventdefault() method (event parameter automagically injected)