I am unable to detect when input type="file" changes its value after user selects file and the dialog box closes.

$('.myInput').change(function(){
    alert($(this).val());
})

Above jQuery code works perfectly in all browsers apart from IE. For some reason IE detects the change only after input field loses focus.

Is there a way to detect the change immediately after dialog box closes? Or maybe to force input field to lose focus after dialog box closes so IE can detect it?

I'm puzzled. Thanks for any help.

I am unable to detect when input type="file" changes its value after user selects file and the dialog box closes.

$('.myInput').change(function(){
    alert($(this).val());
})

Above jQuery code works perfectly in all browsers apart from IE. For some reason IE detects the change only after input field loses focus.

Is there a way to detect the change immediately after dialog box closes? Or maybe to force input field to lose focus after dialog box closes so IE can detect it?

I'm puzzled. Thanks for any help.

• javascript
• jquery
• input

• I'm on 1.4. I'll try 1.4.2 and see if there's any change. Thanks for the tip. – ababa Commented Jun 7, 2010 at 23:56
• 1 This is a known IE (a.k.a special kid)/jQuery bug, there's a temporary fix available on the bug ticket but it hasn't landed in core yet. 1.4.2 got pretty much an entire event re-write (and the bug was filed back in 1.4.1) I'd give 1.4.2 a try. – Nick Craver Commented Jun 7, 2010 at 23:57
• @ecu - Excellent :) I added an answer so future googlers can find the answer a bit easier, it seems ments aren't looked at nearly as often when scanning for the reason. – Nick Craver Commented Jun 8, 2010 at 0:06

3 Answers 3

This was a known bug that was resolved as part of the jQuery 1.4.2 release, 1.4.2 got a major event model re-write and this was fixed as part of that, just upgrade to resolve the problem :)

Edit - Nick is right, it's fixed in 1.4.2. http://jsfiddle/7wR2L/

You can detect click and keep track of it's last value. Something like..

$('.myInput').click(function() {
   var $file = $(this);
   if( $file.val() != $file.data('lastVal') ) {
     // different
   }
   $file.data('lastVal', $file.val() );
});

Dan Heberden's ment about updating to 1.4.2 works.

However if another element is used to trigger the file file selection, the file input element no longer registers a "change" event.

The new question I created for this has a fork your fiddle to illustrate this case. See jQuery: "change" event on file input element does not fire if the file selection is triggered by an element other than the file input for details.