0

I have a input element of type file. I am binding a change event to the element on document.ready to perform a function once a file is selected. This works quite well in IE 9+ and Chrome.

However, I have users on IE 8 as well. In IE 8 the event fires the first time and then on all subsequent attempts to select a file the event does not fire. I tried clearing the file name, and that did not seem help.

Hopefully I don't have the do a browser check and if it is IE 8, bind the event after every file selection.

I have this set up on jsfiddle:

http://jsfiddle.net/sanpopo/pjH5p/

<input id="fileToUpload" type="file" name="fileToUpload" />

$(document).ready(function () {    
    addEventToBrowseFileBtn();
    alert('event was bound');
});


function addEventToBrowseFileBtn() {
        $('#fileToUpload').live('change', function () {
            if ($('#fileToUpload').val() == "") {
                return false;
            }
            alert('doing some code stuff');
        });
    };

Any input advice would be helpful. Thanks!

After doing more research based on some of the comments, I found this post in SO: jQuery change event on <select> not firing in IE looks like the change event has issues with event delegation in IE. All the other solutions I found for input type file suggest using browser detection which I want to avoid.

Community
  • 1
  • 1
Popo
  • 2,402
  • 5
  • 33
  • 55
  • Have you tried without using event delegation? it doesn't appear to be needed in your sample code. – Kevin B May 23 '13 at 17:32
  • @KevinB in my actual code it is necessary. – Popo May 23 '13 at 17:40
  • jQuery's `live()` is deprecated in 1.7 and removed from 1.9. Do not use it. Learn to use `on()` – epascarello May 23 '13 at 17:41
  • If you attempted it without event delegation, does it solve the issue? i'm trying ot make sure that the version of jQuery you're using didn't have a bug in IE with bubbling change events. – Kevin B May 23 '13 at 17:43
  • @epascarello yes sir! I know this, and was trying the .live since I saw it in another SO question, should have changed it back, I had tried .bind as well, which is also no longer recommended. Anyways, thanks for the correction. – Popo May 23 '13 at 17:45
  • Does the fiddle recreate the issue for you? it works just fine for me, though i'm not using true IE8 (IE10 in IE8 mode) – Kevin B May 23 '13 at 17:50
  • I tested it in IE8 and I see an alert for every selection. [IE8 mode on IE9], I did not fire up the VM – epascarello May 23 '13 at 17:52
  • @KevinB I am using 1.7.2. I will try it. – Popo May 23 '13 at 17:53
  • @KevinB if I assign the function to an onchange event within the element it fires everytime. I can probably get by with this, and just re-work some of my other methods. I will read up on this bubbling change event issue – Popo May 23 '13 at 18:00
  • jsfiddle does not even work for me in IE 8 – Popo May 23 '13 at 18:04

1 Answers1

-1

You have to use element.attachEvent in IE 8. The event names are also different.

To add an change event to an element in IE 8 you can do:

element.attachEvent('onchange', methodGoesHere)

Stephen K
  • 697
  • 9
  • 26
  • I don't think this has anything to do with the question, he's using jQuery to bind the events and jQuery already handles this difference internally. – Kevin B May 23 '13 at 17:36