jQuery的.fadeOut回调到。点击不工作

我工作的图像上传应用程序，除了一个错误，这是在Chrome仅发生的一切是伟大的工作。我已经将问题简化为一个未经历的回调。jQuery的.fadeOut回调到。点击不工作

的问题是，.fadeOut回调到。点击（）触发不触发。我已经在下面链接的小提琴中重新创建了一个简化版本。第一次点击启动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/

感谢您的帮助！

编辑：在旧小提琴链接，改变。

来源

2013-03-04 Andy Mercer

不知何故，在回调中放置trigger（）似乎推迟了事件的发展，看起来它是Chrome的安全停止事件，可能是因为它认为它不是用户生成的或类似的东西。只要将它从回调中解放出来就可以解决问题，并且使用常规的setTimeout进行测试似乎也有同样的问题，所以它与延迟触发器（）有关。有一个答案[** here **]（http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input ）处理一个有点类似的问题。 – adeneo 2013-03-04 21:00:43

这是支持什么adeneo说的[另一个答案]（http://stackoverflow.com/questions/12134014/how-can-i-programmatically-open-the-file-picker-with-javascript）。 – 2013-03-04 21:11:37

所以没有办法解决这个问题？ – 2013-03-04 21:13:59

可悲的是，这是不行的。这一切都与浏览器内部的定时/线程功能有关。

问题的核心是这样的：的<input type="file" />可以不以编程（Loads of questions on SO /东西在谷歌这件事）打开。它不仅仅是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'" />

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

来源

2013-03-04 21:33:50 MarcoK

这是令人失望的，但我可以解决它。奇怪的是，当我在Firefox和IE 10上测试时，它工作。 FF给了我，“你想让这个网站的弹出窗口”，IE10没有提供任何警告，只是工作。 – 2013-03-06 19:09:13

这让我疯狂。我非常困惑，为什么它在事件回调中工作，而不是事件回调中的回调。看起来我必须解决它。 – Dex 2015-01-20 09:37:05

更改$('.overlay_wrap').fadeOut(1000,complete)到

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

来源

2013-03-04 20:58:24 MIIB

执行完整功能之前，不会等待淡入淡出完成。 – 2013-03-04 21:00:55

你是对的，对不起，我没有注意到 – MIIB 2013-03-04 21:03:02

jQuery的.fadeOut回调到。点击不工作

回答

相关问题