AJAX upload not working with .innerHTML

Question

I have been working on this for quite a few works now. I have a dynamic table to which I add more columns using a button. In one of these column's I wish to create a image upload button.
I add columns to my table using javascript and to one of those columns I add the following form

 tblBody.rows[row].cells[6].innerHTML = ' <form enctype="multipart/form-data" method="post">
                                          <input type="file" name="file_upload" id="file_upload">
                                          <input class="button green" type="submit" name="submit" value="Submit Content">
                                          </form>';

For uploading the image using AJAX and jQuery I used the following code on github
So I include the following javascript to my code

$(function()
{
// Variable to store your files
var files;

// Add events
$('input[type=file]').on('change', prepareUpload);
$('form').on('submit', uploadFiles);

// Grab the files and set them to our variable
function prepareUpload(event)
{
    files = event.target.files;
}

// Catch the form submit and upload the files
function uploadFiles(event)
{
    event.stopPropagation(); 
    event.preventDefault(); 


    var data = new FormData();
    $.each(files, function(key, value)
    {
        data.append(key, value);
    });

    $.ajax({
        url: 'submit.php?files',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false, // Don't process the files
        contentType: false, // Set content type to false as jQuery will tell the server its a query string request
        success: function(data, textStatus, jqXHR)
        {
            if(typeof data.error === 'undefined')
            {
                // Success so call function to process the form
                submitForm(event, data);
            }
            else
            {
                // Handle errors here
                console.log('ERRORS: ' + data.error);
            }
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            // Handle errors here
            console.log('ERRORS: ' + textStatus);
            // STOP LOADING SPINNER
        }
    });
}

function submitForm(event, data)
{
    // Create a jQuery object from the form
    $form = $(event.target);

    // Serialize the form data
    var formData = $form.serialize();

    // You should sterilise the file names
    $.each(data.files, function(key, value)
    {
        formData = formData + '&filenames[]=' + value;
    });

    $.ajax({
        url: 'submit.php',
        type: 'POST',
        data: formData,
        cache: false,
        dataType: 'json',
        success: function(data, textStatus, jqXHR)
        {
            if(typeof data.error === 'undefined')
            {
                // Success so call function to process the form
                console.log('SUCCESS: ' + data.success);
            }
            else
            {
                // Handle errors here
                console.log('ERRORS: ' + data.error);
            }
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            // Handle errors here
            console.log('ERRORS: ' + textStatus);
        },
        complete: function()
        {
            // STOP LOADING SPINNER
        }
    });
}
});

But for some reason this does not work when I include the form with javascript. It works fine when the form is in normal html file.
Does anybody have a idea why it's not working?