fileupload Jquery doesn't work dynamically

Question

I use this file-upload script: http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/

There is this in it:

$('#upload').fileupload({

My Problem is, that i load the content dynamically, so I think I need something like this (because I know this problem from the .click() function):

$(document).on('fileupload', '#upload', function () {

But this doesn't work. Can anyone help me, how to get this function called when the content with the form with id="upload" is loaded dynamically?

Would be great!

call $('#upload').fileupload(... after your content has been dynamically loaded? — Jaak Kütt, Nov 29 '14 at 17:37
Check this: http://stackoverflow.com/questions/15860839/how-to-bind-jquery-function-to-a-dynamic-dom — Bruno Grieder, Nov 29 '14 at 18:15
@BGR: I don't understand this, why using callback function, if the function itself doesn't work? — progNewbie, Nov 29 '14 at 18:24
*"when the content with the form with id="upload" is loaded dynamically?"* - How are you loading the content..? — T J, Nov 29 '14 at 19:36

score 1 · Answer 1 · edited May 23 '17 at 11:57

You are almost right about the "I need something like this" part - the issue with your attempt at

$(document).on('fileupload', '#upload', function () {

is that 'fileupload' is not an event which is what .on() is expecting and that's why it worked for you with the 'click' case and not here.

You should include the assets/js/script.js to your page after the $('#upload') element is dynamically loaded so that all the content the script needs exists before it is executed. For that take a look at jQuery.getScript() or a simple dom approach and use it after the code which gets your elements added to the dom.

T J · Accepted Answer · 2014-11-29T19:50:41.643

Your issue is probably because you're initializing $('#upload').fileupload() in document.ready().

You should initialize the element as file upload (execute $('#upload').fileupload()) after you dynamically load the content.

Since you're loading the content via ajax on button click (according to comments), you code should be along the following:

$(":button").click(function(){
 $.ajax("url",{
   success: function (data){
     //code for injecting the element into DOM
     $('#upload').fileupload(); // initialize it as file upload
   }
 });
});

score 0 · Answer 3 · answered Nov 29 '14 at 20:08

Use this function

 $(function () {
        var options = {
            beforeSubmit: function (formData, jqForm, options) { },  // pre-submit callback 
            success: function (responseText, statusText, xhr, form) { }   // post-submit callback 
        };
        // bind form using 'ajaxForm' 
        $('#uploadForm').ajaxForm(options);
    });

fileupload Jquery doesn't work dynamically

3 Answers3