title: Inserting file input element using jQuery
body: <p>I'm having trouble inserting file input elements with jQuery. What I want to happen is when a user selects a file using the input element, jQuery should hide that input and insert a new file input in its place.</p>
  
  <p>Here's my relevant markup:</p>
  
  <pre><code>&lt;div id="select_images"&gt;
      &lt;input type="file" name="images[]" multiple="multiple" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my Javascript:</p>
  
  <pre><code>$('#select_images input').change(function(){
      // User selected some images to upload, hide this file input
      $(this).css('right', '-10000px');
  
      // Insert a new file input to take its place
      $('#select_images').append('&lt;input type="file" name="images[]" multiple="multiple" /&gt;');
  });
  </code></pre>
  
  <p>It kind of works. When I select a file using the file input already on the page, jQuery hides it and inserts a new one. When I try to do the same again however, jQuery does not insert a new file input.</p>
  
  <p>I can't see any reason that the above code will only insert one additional file input, so I'm pretty stumped. I've confirmed this behaviour using both Firebug and POSTing the form data to my backend script.</p>
  
  <p>Any help is appreciated. Thanks!</p>