jQuery File Upload not working when file input dynamically created

Question

i am using this jquery uploader (http://blueimp.github.io/jQuery-File-Upload/basic.html) and it works fine when the file input is put in the raw code of the site, however i am dynamically appending the fields with jquery and it doesnt work. here is the jquery to trigger the upload:

$('.fileupload').fileupload({
    dataType: 'json',
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            alert(file.name);
            //$('<p/>').text(file.name).appendTo(document.body);
        });
    }
});

and this is what SHOULD trigger the upload:

<input class="fileupload" type="file" name="files[]" data-url="uploads/">

Here is the code that is appended by jquery:

$(document).on('click','.addItem', function(){
            $('<!--ROW START-->\
                <form class="widget-content item" data-url="uploads/">\
                    <div class="row">\
                        <div class="col-md-3"><input type="text" class="form-control" name="itemName[]"></div>\
                        <div class="col-md-3"><textarea class="auto form-control" name="itemDescription[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
                        <div class="col-md-3"><textarea class="auto form-control" name="itemCondition[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"></textarea></div>\
                        <input type="hidden" class="itemId" name="itemId[]" value="">\
                        <input type="hidden" name="itemInventoryId[]" value="<?=$_GET["inventory_id"]?>">\
                        <input type="hidden" name="itemParent[]" value="'+$(this).closest('.formHolder').data('parent-room')+'">\
                        <div class="col-md-2">\
                            <div class="fileinput-holder input-group">\
                                <input class="fileupload" type="file" name="files[]">\
                            </div>\
                        </div>\
                        <div class="col-md-1 align-center"><i class="save icon-ok large"> </i>&nbsp;&nbsp;&nbsp;<i class="delete icon-trash large"> </i></div>\
                    </div>\
                </form>\
            <!--/ROW END-->').fadeIn(500).appendTo($(this).parents().siblings('.items'));
            $(this).parent().parent().siblings('.widget-header, .header-margin, .hide').removeClass('hide').fadeIn();
        });

like i say, when i add it into the actual code, not dynamically its fine. Can someone help please?

Answer 1

This is because you bind fileupload event before element is added.

Try moving your code into callback function which will be executed after you create input element. Since appendTo() doesn't support callback, you can use each(callback):

$('code_that_you_append').appendTo('some_element').each(function () {
    // here goes $('.fileupload').fileupload({ ... }) function
});

If you need to bind event to .fileupload in multiple places in code, you can create a function to avoid code repetition, like this:

function bindFileUpload() {
    $('.fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                alert(file.name);
            });
        }
    });
};

and then call it in the callback, like before:

$('code_that_you_append').appendTo('some_element').each(function () {
    bindFileUpload();
});

I've created a little demo. It binds click instead of fileupload to simplify things (fileupload is external plugin...), but the general rule stays the same.

Answer 2

You need to use the jQuery live() function.

This tip I found worked for me.

jQuery fileupload for dynamically added input field

Answer 3

Just bind the upload function with a static identifier at first. Here, 'document' is the static identifier. You can use anything like this that has not been added dynamically. Usually, document is used more often.

$(document).on('click', '.fileupload', function () {
    $('.fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                alert(file.name);
                //$('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

Answer 4

N.B: Please see accepted answer first.

I think accepted answer has little mistake. I just trying to recover that. On @Michał Rybak little demo you will see that every time we click add item another click event also will be added to previous added new link( add more then new link and see first new link show alert number of time new item). Because every time it add new link we again add click event to all new link elements.

 $('<p><a href="#" class="link">new link</a></p>').appendTo('body').each(function () {
      // bindClickToLink call every 'new link' and add click event on it
        bindClickToLink();
    });  

To solve that issues, instead add click event to all item we just add to newly created item. Here is my solution my demo .