jQuery .fadeOut 回调到 .click 不工作

Question

我正在开发一个图片上传器应用程序，除了一个仅在 Chrome 中出现的错误之外，一切都运行良好。我已将问题简化为一个未通过的回调。

问题是 .click() 触发器的 .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');
        });
    });
});

http://jsfiddle.net/gg2a7/5/

感谢您的帮助！

编辑：旧的 Fiddle 链接已更改。

Answer 1

很遗憾，这行不通。这一切都与浏览器中的计时/线程功能有关。

问题的核心是：<input type="file" /> 不能以编程方式打开（Loads ofquestions on SO/Google 上关于它的资料）。不仅是 Chrome； Firefox 显示弹出窗口被阻止的消息，Safari 也会阻止它，并且在 IE 中表单不会提交。

这背后的原因是因为它存在潜在的安全风险。只有用户操作才能打开此<input type="file" />。由于.fadeOut()，浏览器不再将其识别为用户事件。现在我们回到浏览器的计时/线程，因为这确实工作。没有任何委托，也没有其他线程/超时阻止对话框打开。

$("#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.

Answer 2

将您的 $('.overlay_wrap').fadeOut(1000,complete) 更改为

$('.overlay_wrap').fadeOut(1000);
complete();