Internet Explorer 文件输入 onchange答案

【问题标题】：Internet Explorer file input onchangeInternet Explorer 文件输入 onchange
【发布时间】：2009-11-23 00:46:34
【问题描述】：

我有这些动态创建的文件输入 HTML 元素，它们与 jQuery-ajax 文件上传插件一起使用。

我希望在输入值更新后开始上传文件。但是，Internet Explorer 似乎忽略了 Javascript onChange。

如何在 IE 中实现这一点？

例子：

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

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

【问题讨论】：

标签： javascript jquery internet-explorer events onchange

【解决方案1】：

您可以将上面的内容替换为类似的内容

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

或

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

【讨论】：

更多解释：HTML <div> 元素不支持 change 事件。只有<input> 元素可以。您实际上也对输入的更改感兴趣。所以你需要将它应用到<input> 元素上。
奇怪的是，那段代码在 Firefox 中可以工作......看图 :)
似乎有些浏览器仍然支持div的更改事件。如果您的浏览器在单击按钮时显示警报，请检查jsbin.com/udake。在 Opera 10.01 中对我有用
这是一个冒泡的事件，因为鲍勃在另一个答案中已经很好地解释了。

【解决方案2】：

当您在 jQuery 中从 HTML 创建元素时，返回的句柄引用最外层的元素，因此您将 change 事件处理程序放在 <div> 上，而不是 <input>。

这在大多数浏览器中仍然有效，因为在DOM Level 2 Events 规范中，change 事件“冒泡”文档以在文档更改时通知其父级，因此<div> 上的事件处理程序将收到任何更改的通知在它的任何孩子<input>s 上。但是 IE 有自己的事件模型，其中change does not bubble。

另一种选择：

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

【讨论】：