title: jQuery File Upload not working when file input dynamically created
body: <p>i am using this jquery uploader (<a href="http://blueimp.github.io/jQuery-File-Upload/basic.html" rel="noreferrer">http://blueimp.github.io/jQuery-File-Upload/basic.html</a>) 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:</p>
  
  <pre><code>$('.fileupload').fileupload({
      dataType: 'json',
      done: function (e, data) {
          $.each(data.result.files, function (index, file) {
              alert(file.name);
              //$('&lt;p/&gt;').text(file.name).appendTo(document.body);
          });
      }
  });
  </code></pre>
  
  <p>and this is what SHOULD trigger the upload:</p>
  
  <pre><code>&lt;input class="fileupload" type="file" name="files[]" data-url="uploads/"&gt;
  </code></pre>
  
  <p>Here is the code that is appended by jquery:</p>
  
  <pre><code>$(document).on('click','.addItem', function(){
              $('&lt;!--ROW START--&gt;\
                  &lt;form class="widget-content item" data-url="uploads/"&gt;\
                      &lt;div class="row"&gt;\
                          &lt;div class="col-md-3"&gt;&lt;input type="text" class="form-control" name="itemName[]"&gt;&lt;/div&gt;\
                          &lt;div class="col-md-3"&gt;&lt;textarea class="auto form-control" name="itemDescription[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"&gt;&lt;/textarea&gt;&lt;/div&gt;\
                          &lt;div class="col-md-3"&gt;&lt;textarea class="auto form-control" name="itemCondition[]" cols="20" rows="1" style="word-wrap: break-word; resize: vertical;"&gt;&lt;/textarea&gt;&lt;/div&gt;\
                          &lt;input type="hidden" class="itemId" name="itemId[]" value=""&gt;\
                          &lt;input type="hidden" name="itemInventoryId[]" value="&lt;?=$_GET["inventory_id"]?&gt;"&gt;\
                          &lt;input type="hidden" name="itemParent[]" value="'+$(this).closest('.formHolder').data('parent-room')+'"&gt;\
                          &lt;div class="col-md-2"&gt;\
                              &lt;div class="fileinput-holder input-group"&gt;\
                                  &lt;input class="fileupload" type="file" name="files[]"&gt;\
                              &lt;/div&gt;\
                          &lt;/div&gt;\
                          &lt;div class="col-md-1 align-center"&gt;&lt;i class="save icon-ok large"&gt; &lt;/i&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;i class="delete icon-trash large"&gt; &lt;/i&gt;&lt;/div&gt;\
                      &lt;/div&gt;\
                  &lt;/form&gt;\
              &lt;!--/ROW END--&gt;').fadeIn(500).appendTo($(this).parents().siblings('.items'));
              $(this).parent().parent().siblings('.widget-header, .header-margin, .hide').removeClass('hide').fadeIn();
          });
  </code></pre>
  
  <p>like i say, when i add it into the actual code, not dynamically its fine. Can someone help please?</p>