5

私は画像アップローダーアプリに取り組んでいますが、Chromeでのみ発生する1つのバグを除いて、すべてがうまく機能しています。問題を、通過していない1つのコールバックに分解しました。

問題は、.click（）トリガーへの.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/

お手伝いありがとう！

編集：古いフィドルリンクを持っていた、変更されました。

4

2 に答える 2

2

残念ながら、これは機能しません。それはすべて、ブラウザ内のタイミング/スレッド機能と関係があります。

問題の<input type="file" />核心はこれです：プログラムで開くことができません（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。

于 2013-03-04T21:33:50.280 に答える
0

に変更$('.overlay_wrap').fadeOut(1000,complete)します

$('.overlay_wrap').fadeOut(1000);
complete();
于 2013-03-04T20:58:24.010 に答える