appending file inputs not working on ajaxfileupload

Question

I am using a plugin called, ajaxfileupload https://github.com/jfeldstein/jQuery.AjaxFileUpload.js

My problem is that when I dynamically append an input file, the plugin events are not applied to that newly appended input file.

This is how the plugin is being called on click of the file input:

$("#mcq_option_list input[type=file], #question_name input[type=file], #test").ajaxfileupload({

This is my append function:

$(this).before('<div class="answer_div"><input id="'+new_num+'" class="rb" type="radio" value="'+new_num+'"><label for="'+new_num+'" class="mc_label"><strong class="abcdWrapper">'+next_letter+'</strong></label><div class="fake-input"><input type="text" class="long_input" placeholder="Enter Sub Option here..." name="data[Quiz][option][]" autocomplete="off"><span></span><div class="inputWrapper"> Upload Image<input class="fileInput" type="file" name="data[Quiz][image]['+new_num+']" id="test"></div></div><a href="#" class="delete-scale-question"></a></div>');

Thanks for the help in advance.

does you r input tag has a onclick function like else you have to use like $('input').bind('live', function(){ //user plugincode } ); — RONE, Sep 03 '13 at 07:14
jQuery events are added to elements which match the selector criteria at the time of execution. If you add new elements to the DOM later, they won't get events attached properly. jQuery's `.live()` checks elements on-the-fly to see if they match. It's slow, though so avoid it if you can - better to add the handlers/events when you add elements to the DOM — Basic, Sep 03 '13 at 07:14
@SAM I tried your solution but it gave me Uncaught ReferenceError: ajaxfileupload is not defined — comebal, Sep 03 '13 at 07:19
@comebal Sorry, should've been [`.on()`](http://stackoverflow.com/q/8021436/156755) - I hadn't had my coffee but the same point applies. Are you expecting events to be added to elements which weren't in the DOM when you ran the selector? — Basic, Sep 03 '13 at 07:44
@comebal Click the link in my previous comment (the .on() was a hyperlink) and look at the first answer — Basic, Sep 03 '13 at 12:45

score 0 · Accepted Answer · answered Sep 03 '13 at 10:39

I have the answer already, its right that I should enclose everything in an "on" statement.

Here is the full code:

$("#mcq_contain").on("click", "#mcq_option_list input[type=file], #question_name input[type=file], #test", function(){
     $(this).ajaxfileupload({
          // Code goes here
     }); 
});

appending file inputs not working on ajaxfileupload

1 Answers1