我正在开发一款图像 uploader 应用，除了一个仅在 Chrome 中出现的错误之外，一切都运行良好。我已将问题简化为一个未执行的回调。
问题是 .click() 触发器的 .fadeOut 回调未触发。我在 fiddle 中重新创建了一个简化版本，链接如下。第一次单击会启动 fadeOut，当 fadeOut 完成时，不会发生 .click 触发器。单击第二次然后触发触发器。有什么想法吗？
HTML:
<div><input type="file" name="image_file" id="image_file"/></div>
<div class="overlay_wrap">
Overlast
</div>
<a id="click" href="">Click</a>
jQuery:
$(document).ready(function() {
$("#click").click(function(event) {
event.preventDefault();
$('.overlay_wrap').fadeOut(1000, function(event){
$('#image_file').trigger('click');
});
});
});
感谢您的帮助!
编辑:旧的 Fiddle 链接已更改。
请您参考如下方法:
遗憾的是，这行不通。这一切都与浏览器内的计时/线程功能有关。
问题的核心是这样的:<input type="file" />不能以编程方式打开(Loads of questions on SO/Google 上的相关内容)。不仅仅是 Chrome；还有 Chrome。 Firefox 显示一条弹出窗口被阻止的消息，Safari 也会阻止它，并且在 IE 中表单将不会提交。
这背后的原因是因为它存在潜在的安全风险。只有用户操作才能打开此<input type="file" /> 。因为.fadeOut() ，浏览器不再将其识别为用户事件。现在我们回到浏览器的计时/线程，因为这确实有效。没有任何委托(delegate)，也没有某种阻止对话框打开的其他线程/超时。
$("#click").click(function(event) {
event.preventDefault();
$('#image_file').trigger('click');
});
JSFiddle .
表明它实际上是 <input type="file" /> ，这是一个带有 <input type="button" /> 的示例这确实有效:
HTML
<input type="button" name="image_file" id="image_file" value="type='button'" />
JS
$("#click").click(function(event) {
event.preventDefault();
$('.overlay_wrap').fadeOut(1000, function(){
$('#image_file').trigger('click');
});
});
$('#image_file').click(function() {
alert('ok');
});
JSFiddle .
长话短说:你不能用淡入淡出效果来做到这一点。您只需打开对话框并隐藏该元素即可，但仅此而已。
$("#click").click(function(event) {
event.preventDefault();
$('.overlay_wrap').hide();
$('#image_file').trigger('click');
});
JSFiddle .
