4

从 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 的小提琴，它演示了我期望该行为如何工作：

http://jsfiddle.net/UMxkt/

在所有浏览器（包括 Firefox 3.6）中，每次我选择一个文件时， input[type=file] 元素上的 change 事件都会冒泡。

这是使用 jQuery 1.9 的相同示例。使用 Firefox 3.6，更改事件不再冒泡。不过，它似乎在 Firefox 18+ 中运行良好：

http://jsfiddle.net/UMxkt/1/

这让我想到了两个问题：

1) 哪个版本的 Firefox 停止工作？

2）有没有办法解决这个问题？

4

3 回答 3

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>

小提琴：http: //jsfiddle.net/UMxkt/14/

于 2014-02-20T03:39:53.620 回答
1

有趣的发现，

至于你的第一个问题，我不知道答案，我能想到的唯一方法是通过并尝试找到尽可能多的 FireFox 版本进行测试，以确定问题何时发生。虽然我确实找到了一个 Firefox 版本存档http://ftp.mozilla.org/pub/mozilla.org/firefox/releases/

如果您的.file_input元素不是动态创建的，您可以执行以下操作：

$('.file_input').change(function(){
   $('.result').append('<li>file selected</li>');    
});

我用代码工作了一段时间，看看我是否能想出一个使用事件委托的解决方法。我发现虽然.change在 firefox 3.6 和 jQuery 1.9中不起作用，.click但确实如此。

我想出了以下内容：

var file = '';
var selected = false;
var tid; 
function fileCheck() {
    if(file != $('.file_input').val())
    {
        file = $('.file_input').val();
        $('.result').append('<li>file selected</li>');
        selected = false;
        clearInterval(tid);
    }
}
$('.wrapper').on('click','.file_input',function(){  
   clearInterval(tid);
   selected = true;
   tid = setInterval(fileCheck, 300); 
});

小提琴

更新

class当通过或使用事件委托引用文件输入时，它似乎不起作用id，但以其他方式引用它。如：

$('.wrapper input[type=file]').on('change', function() {
    $('.result').append('<li>file selected</li>');
});

于 2013-11-05T17:16:39.753 回答
0

尝试使用此代码：

$('.wrapper input:first-child').on('change', function() {
$('.result').append('<li>file selected</li>');
});
于 2013-11-06T15:42:06.727 回答