从 jQuery 1.9 开始,文件选择更改事件在旧版 Firefox 中不再冒泡/传播。在 jQuery 1.8 中它很好,但在 jQuery 1.9 中它停止工作。
这是一个例子:
<ul class="result"></ul>
<div class="wrapper">
<input class="file_input" name="file" type="file" />
</div>
<script>
$('.wrapper').on('change', '.file_input', function() {
$('.result').append('<li>file selected</li>');
});
</script>
这是一个使用 jQuery 1.8 的 fiddle ,演示了我期望该行为如何工作:
在所有浏览器(包括 Firefox 3.6)中,每次我选择一个文件时,input[type=file] 元素上的更改事件都会冒泡。
这是使用 jQuery 1.9 的相同示例。使用 Firefox 3.6,change 事件不再冒泡。不过,它在 Firefox 18+ 中似乎运行良好:
这让我想到了两个问题:
1) 哪个版本的 Firefox 会停止工作?
2)有办法解决这个问题吗?
最佳答案
我今天遇到了这个问题,发现旧版本的 Firefox 检测浏览器更改事件冒泡功能的方式已被破坏。 Bug 13609提交后关闭,因为jQuery不支持老版本的firefox
编辑
在开始使用 IE8 进行工作和测试之后,我想出了以下可能是最兼容的解决方案。您可以查看我的修订,了解我如何最终将此作为我的解决方法。这应该在加载 jQuery 1.9 及更高版本后执行
<script type="text/javascript">
// checks taken from jQuery 1.8.3
function isChangeBubbleSupported(element) {
if (!element.attachEvent) {
return true;
}
var eventName = { change: true };
if (eventName in element) {
return true;
}
element.setAttribute(eventName, "return;");
return typeof div[eventName] === "function";
}
var div = document.createElement(div);
if (window.onchange === undefined && isChangeBubbleSupported(div)) {
// setting this to undefined will prevent special case handling for change events
// that was breaking old versions of firefox
jQuery.event.special.change = undefined;
}
div = null;
</script>
fiddle :http://jsfiddle.net/UMxkt/14/
关于jQuery 1.9 不会在旧版 Firefox 中冒泡文件选择/更改事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19498492/