title: why is my .on('change') not working?
body: <p>I'm adding inputs dynamically into my page, so need to use <code>.on</code> to attach events to them.</p>
  
  <p>I'm trying to attach a <code>change</code> event to a <code>type="file"</code> <code>input</code>, but it's just not working.</p>
  
  <p>I've tried two ways, the first:</p>
  
  <pre><code>$('.container').on('change', '.file-input-hidden' , function(){
  </code></pre>
  
  <p>where the input has a class of <code>file-input-hidden</code>.</p>
  
  <p>and the second:</p>
  
  <pre><code>$('.container').on('change', 'input[type="file"]' , function(){
  </code></pre>
  
  <p>but neither fire the function when a file is selected/ changed with the <code>input</code>.</p>
  
  <p>What's going wrong?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>view the page here: <a href="http://ry-design.co.uk/image-upload-test.php" rel="nofollow">LINK</a></p>
  
  <p>and js:</p>
  
  <pre><code>$('.container').on('click', '.file-browse' , function(){
      var thisone = $(this).attr('id');
      $('input[name="input-'+ thisone+'"]').click();
  });
  
  $('.file-input-hidden').on('change', function(){
      var thetext = $(this).val();
      var thetextsplit = thetext.split('\\').pop();
      var thisone = $(this).attr('name').split('-').pop();
      if($('.file-info').text() == thetextsplit){
          alert('you have already selected this file');
          $(this).replaceWith( $(this).val('').clone( true ) );
      }
      else{
          $('#info-'+ thisone).text(thetextsplit);
          $('#clear-'+ thisone).fadeIn(100);
          var emptyinputs = $('.file-info:empty').length;
          if(emptyinputs &lt;1){
              var filledinputs = $(".file-info:contains('.')").length;
              var thisnumber = filledinputs + 1;
              var filecontainer = $('&lt;div&gt;').addClass('file-container');
              var fileinfo = $('&lt;div&gt;').addClass('file-info').attr('id','info-file'+thisnumber);
              var filebrowse = $('&lt;div&gt;').addClass('file-browse').attr('id','file'+thisnumber).text('Browse');
              var fileclear = $('&lt;div&gt;').addClass('file-clear').attr('id','clear-file'+thisnumber).text('X');
              var newinput = $('&lt;input&gt;').attr({'type':'file','name':'input-file'+thisnumber}).addClass('file-input-hidden');
              var thebody = $('.container');
              (filecontainer).append(fileinfo,filebrowse,fileclear);
              filecontainer.appendTo(thebody);
  
              var theform = $('#hidden-inputs');
              newinput.appendTo(theform);
          }
      }
  
      if($(this).val() == ''){
      $('#clear-'+thisone).fadeOut(100);
      }
  });
  
  $('.container').on('click', '.file-clear' , function(){
      var thisone = $(this).attr('id').split('-').pop();
      $('input[name="input'+ thisone +'"]').replaceWith( $('input[name="input'+ thisone +'"]').val('').clone( true ) );
      $('#info-'+ thisone).text('');
      $(this).fadeOut(100);
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div class="container"&gt;
      &lt;div class="file-container"&gt;
        &lt;div class="file-info" id="info-file1"&gt;&lt;/div&gt;
        &lt;div class="file-browse" id="file1"&gt;Browse&lt;/div&gt;
        &lt;div class="file-clear" id="clear-file1"&gt;X&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;form action="" method="POST" enctype="multipart/form-data" id="hidden-inputs"&gt;
    &lt;input type="submit" style="clear:both; float:left;"/&gt;
    &lt;input type='file' name="input-file1" class="file-input-hidden" /&gt;
      &lt;/form&gt;
  </code></pre>