title: Second use of input file doesn't trigger onchange anymore
body: <p>I have a picture upload button that automatically uploads the file when selected from the browse window.<br>
  Nonetheless, it doesn't work the second time around and that is because the onChange event is not triggered. Why is that so?</p>
  
  <p><strong>Here is a use case:</strong><br>
  1. On click of the button, I call uploadMessagePicture(), which opens the browse window.<br>
  2. When the user has selected a picture, a onChange event is detected which triggers the ajaxFileUpload() and shows the photo editor area.<br>
  3. When the upload is complete, a preview of the image is shown.
  4. The user deletes the picture by calling deleteMessageImage() (which also clears the fields and hides the photo editor).<br>
  5. The user tries to upload another picture.  </p>
  
  <p>At this point, the browse window appears, but when I select a picture, the onChange event is not triggered so nothing happens... (Also, it doesn't seem like the filename is even transfered to the input' value field.)<br>
  I'm on Firefox 23.0.1  </p>
  
  <p><strong>Here is the HTML:</strong></p>
  
  <pre><code>&lt;a class="im-photo-btn" href="javascript:;" onclick="javascript:uploadMessagePicture();"&gt;&lt;i class="icon-join-photo"&gt;&lt;/i&gt;&lt;/a&gt;
  
  &lt;div class="editor-photoarea" id="editor-photoarea" style="display:none;"&gt;
      &lt;input name="image_message_file" type="hidden" id="image_message_file" value="" /&gt;
      &lt;div id="image_message_upload"&gt;
          &lt;input name="image-message" type="file" id="image-message" style="display:none; visibility:hidden;" /&gt; 
          &lt;!-- hide it and trigger it from the photo btn (need both display:none + visibility:hiden for browser compatibility) --&gt;
      &lt;/div&gt;
      &lt;div class="loading" id="image_message_loading" style="display:none;"&gt;&lt;img alt="&lt;?php echo $lang["Loading"];?&gt;" src="lib/immedia/img/ajax-loader.gif" /&gt; &lt;?php echo $lang["Loading"];?&gt;&lt;/div&gt;
      &lt;div class="preview" style="display:none;" id="image_message_preview"&gt;
          &lt;!-- &lt;div&gt;Image preview :&lt;/div&gt;
          &lt;div id='small_message_msg'&gt;&lt;/div&gt;
              &lt;img src='' /&gt;
              &lt;div class='btnoptions'&gt;
                  &lt;a onclick='javascript:deleteMessageImage();' href='javascript:;' class='button' title="Delete photo"&gt;
                      &lt;span class='ui-icon ui-icon-closethick smsg'&gt;&lt;/span&gt;Delete
                  &lt;/a&gt;
           &lt;/div&gt;--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Here is the javascript to automatically upload the picture</strong></p>
  
  <pre><code>$(document).ready(function (){
      $("#image-message").on('change', function () {
          $('#editor-photoarea').show();
          ajaxFileUploadMessagePicture();
      });
  });
  
  function uploadMessagePicture(){
      //trigger the browse click
      if($('#image_message_file').val() == ''){
          //let the person upload a file only if none are there
          $('#image-message').trigger('click');
      }
  }
  
  function ajaxFileUploadMessagePicture(){
  $("#msg_error_no_image_message").hide();
  
  var imageName = $("#image-message").val();
  if(imageName != ''){
      $("#image_message_loading").show();
      $('#sendBtn').attr('disabled', 'disabled');
  
      $.ajaxFileUpload
      (
          {
              url:siteRegionDir+'lib/immedia/uploadMessagePicture.php',
              secureuri:false,
              fileElementId:'image-message',
              dataType: 'json',
              success: function (data, status)
              {
                  updateMessagePicture(data);             
              },
              error: function (data, status, e)
              {
                  alert(e);
              }
          }
      )   
  }else{
      $("#msg_error_no_image_message").show();
  }
  return false;
  }
  </code></pre>
  
  <p><strong>Here is the Javascript to delete the picture and clear the fields</strong></p>
  
  <pre><code>function deleteMessageImage(){
  //delete the image
  var file = $("#image_message_file").val();
  
  if(file != '') {
      $.post(siteRegionDir+'lib/immedia/deleteMessagePicture.php',{filename:file}, function(data) {   
              clearPictureAttachment();               
              $('#editor-photoarea').hide();//make sure it is hidden
          },"html"  
      );
  }else{      
      clearPictureAttachment();
      $('#editor-photoarea').hide();//make sure it is hidden
  }
  }
  
  function clearPictureAttachment(){
  //var control = $("#image-message");
  $("#image-message").attr('value', '');
  //control.replaceWith( control = control.clone( true ) );//so it resets it all, truw = keep the bound events
  $("#image_message_file").attr('value', '');
  $("#image_message_loading").hide();
  $("#image_message_upload").show();
  $("#image_message_preview").hide();
  }
  </code></pre>
  
  <p>Any help would be great! Thanks!</p>