Ajax插入后，表单未序列化

Question

Tearing my hair out over this. I have a 40 rows of simple forms that are being generated dynamically from a mysql database. Each form has a unique ID based on the database ID. After clicking submit the results get updated in the database and inserted into the div (#result).

Works the first time perfectly. However after the first time the script won't serialize the updated form data. The ID is fine (checked via alert) but the formData is empty (also checked via alert).

Thinking I need to re-target the form somehow? Any help would be greatly appreciated. Thanks.

$('#result').on('click', '.submitform', function () {
    var id = $(this).attr('id');
    var formData = $('#'+id+'-form').serialize();
    $.ajax({
        type: "POST",
        url: "ajax-process-form.php",
        data: formData,
        cache: false,
        success: function(server_response){
            $("#result").html(server_response).show();
        }
    });
    return false;
});

Answer 1

Just reasoning... I might be wrong...

This code

$('#result').on('click', '.submitform'

binds to the click event on result and filters .submitform , then executes with this being the .submitform

when the success comes from the server, you are rewriting #result

$("#result").html(server_response)

if server_response does not contain a .submitform then next calls to the first onclick event will not execute because .submitform does not exist anymore inside #result

If this is the error, then to solve, use another div to show the result instead of #result or bind click to another separated, not contained within div

Answer 2

Arrgh - it was the structure after all. Although it worked the first time the table structure prevented it from working a second time. I have no idea why ... but there you go. Thanks for the help!