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> )
);

友情链接