jQuery .fadeOut Callback to .click Not che funziona

Question

Sto lavorando a un'applicazione di caricamento di immagini e tutto funziona perfettamente tranne un bug, che si verifica solo in Chrome. Ho ridotto il problema a una richiamata che non sta attraversando.

Il problema è che un richiamo .fadeOut su un trigger .click() non viene attivato. Ho ricreato una versione semplificata in un violino che è collegato qui sotto. Il primo clic avvia il fadeOut e quando il fadeOut è terminato, il trigger .click non si verifica. Fare clic una seconda volta Fa quindi scattare il grilletto. Tutte le idee perché?

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/

Grazie per l'aiuto!

MODIFICA: il vecchio collegamento Fiddle era cambiato.

Answer 1

Purtroppo, questo non funzionerà. Tutto ha a che fare con le funzioni di timing/threading all'interno dei browser.

Il nocciolo del problema è questo: Il <input type="file" /> può non essere aperto a livello di codice (Loads ofquestions on SO/roba su Google su di esso). Non è solo Chrome; Firefox sta mostrando un messaggio che blocca un pop-up, Safari lo bloccherà, e in IE il modulo non verrà inviato.

La ragione di questo è perché è un potenziale rischio per la sicurezza. Solo un'azione utente può provocare l'apertura di questo <input type="file" />. A causa dello .fadeOut(), il browser non lo riconosce più come un evento utente. Ora torniamo ai tempi/thread dei browser, dal momento che questo funziona come. Non c'è alcuna delega, né un altro thread/timeout di qualche tipo che impedisce l'apertura della finestra di dialogo.

$("#click").click(function(event) { 
    event.preventDefault(); 
    $('#image_file').trigger('click'); 
}); 

JSFiddle.

per mostrare che è in realtà il <input type="file" />, ecco un esempio con <input type="button" /> che fa lavoro:

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.

Per farla breve: non è possibile farlo con un effetto di dissolvenza. Puoi semplicemente aprire la finestra di dialogo e nascondere l'elemento, ma questo è tutto ciò che c'è da fare.

$("#click").click(function(event) { 
    event.preventDefault(); 
    $('.overlay_wrap').hide(); 
    $('#image_file').trigger('click'); 
}); 

JSFiddle.

Answer 2

Cambia la tua $('.overlay_wrap').fadeOut(1000,complete) a

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