jQuery 1.9不会在旧Firefox中冒泡文件选择/更改事件

从jQuery 1.9开始，文件选择更改事件不会在旧Firefox中冒泡/传播。在jQuery 1.8中很好，但在jQuery 1.9中停止工作。jQuery 1.9不会在旧Firefox中冒泡文件选择/更改事件

下面是一个例子：

<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/

这使我2个问题：

1）什么版本的Firefox这是否停止工作？

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

来源

2013-10-21 Johnny Oshika

你尝试的jQuery迁移的方法是什么？使用旧的jQuery版本，但使新版本工作： https://github.com/jquery/jquery-migrate/#readme –

有趣的发现，

至于你的第一个问题，我不知道答案，我能想到的唯一的办法去弄清楚是要经过，并试图找到尽可能多的火狐版本为可能的测试以确定问题何时发生。虽然我没有找到一个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); 
});

Fiddle

更新

它看似使用事件代表团class或id引用文件输入时不工作，但引用它其他方式的作品。如：

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

来源

2013-11-05 17:16:39 Trevor

在你的*更新*，你没有使用事件委派，因为你正在附加该事件直接监听元素。在这种情况下，任何选择器（甚至是类或id）都可以工作。 –

@JohnnyO对，我想它和直接引用它一样。 – Trevor

我不是投票技巧的忠实粉丝，但我会给你赏金，因为这是在这里提供的最佳答案。对于任何想要使用这种技术的人，都应该考虑到这个问题。出现文件对话框时，点击“取消”或选择已经选择的文件。投票从未停止并将无限期地继续。 –

尝试使用此代码来代替：

$('.wrapper input:first-child').on('change', function() { 
$('.result').append('<li>file selected</li>'); 
});

来源

2013-11-06 15:42:06 Manolo

您不使用事件委托（又名冒泡/传播），因为您直接将事件侦听器附加到元素。 –

我就遇到了这个问题，今天想通了，他们检测浏览器的方式进行改变事件冒泡功能被打破适用于旧版本的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-20 03:39:53

jQuery 1.9不会在旧Firefox中冒泡文件选择/更改事件

回答

相关问题