Internet Explorer file input onchange

Question

I have these dynamically created file input HTML elements which are used with a jQuery-ajax file upload plug-in.

I would like the file upload to start after the input value has been updated. However, Internet Explorer seems to ignore the Javascript onChange.

How can I achieve this in IE?

Example:

var html = $('<div class="add_input">'+
        '<input type="file" name="file"/></div>').change(submit);

$('#add_inputs').prepend(html);

Answer 1

You could just replace the above with something along these lines

var html = $('<div class="add_input"><input type="file" name="file"/></div>');
$('#add_inputs').prepend(html);
$("div.add_input > input[name='file']").change(submit);

or

var html = $('<div class="add_input"><input id="filer" type="file" name="file"/></div>');
$('#add_inputs').prepend(html);
$("#filer").change(submit);

Answer 2

When you create elements from HTML in jQuery, the returned handle references the outermost element(s), so you're putting the change event handler on the <div>, not the <input>.

This works nonetheless in most browsers because in the DOM Level 2 Events specification, the change event ‘bubbles’ up the document to inform its parents when it changes, so an event handler on <div> will get informed of any changes on any of its child <input>s. However IE has its own event model in which change does not bubble.

An alternative:

($('<input type="file" name="file" />')
    .change(submit)
    .prependTo('#add_inputs')
    .wrap('<div class="add_input"></div>')
);