Question

我正在开发一个图片上传器应用程序，除了一个只在Chrome中发生的错误外，一切都运行良好。我已经把问题解决了一个没有通过的回调。

问题是.fadeOut回调到.click（）触发器没有触发。我在下面链接的小提琴中重新创建了一个简化版本。第一次单击启动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');
        });
    });
});

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

感谢您的帮助！

编辑：如果旧的小提琴链接改变了。

Answer 1

可悲的是，这不起作用。这一切都与浏览器中的计时/线程功能有关。

问题的核心是： <input type="file" />可以不以编程方式打开（Loads of questions on SO / stuff on关于它的谷歌）。它不仅仅是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();

jQuery .fadeOut回调.click不工作

2 个答案: