ejecutar el código DESPUÉS de que Recaptcha.reload() haya finalizado

Question

Tengo una función debajo que se llama para volver a cargar una imagen recaptcha. Funciona, recarga la imagen pero no hará nada después de eso. Básicamente, la forma es pequeña que tiene esta recaptcha en ella, así que la he encogido y permitido hacer clic para agrandar y todo eso. Si la persona presiona "obtener otro captcha" que llama a reloadCAP(), verifica si tiene la clase de ser una imagen más grande. si lo hace, necesito agregar esa clase y css a los elementos DESPUÉS de que se cargue la nueva imagen, pero parece que no puedo hacer que funcione. ¿Algunas ideas?

function reloadCAP() { 
    if($("#recaptcha_widget img").hasClass('largecap')) { 
     Recaptcha.reload(); 
     $("#recaptcha_widget img").addClass('largecap'); 
     $('#recaptcha_image').css('height', '62px'); 
    } else { 
     Recaptcha.reload(); 
    } 
} 

aquí está el código HTML para esto:

<div id="recaptcha_widget" class="formRow" style="display:none;"> 
    <span class="f_label">Enter Words Below:</span> 
    <input type="text" class="setWidth" id="recaptcha_response_field" name="recaptcha_response_field" /> 

    <div class="cantread"> 
     <strong>Can't read this?</strong><br /> 
     <a href="javascript:reloadCAP()">Get another CAPTCHA</a> 
    </div> 

    <div id="recaptcha_image"></div> <!-- image loaded into this div --> 
     <div class="clear"></div> 
     <span class="smalltext">(click to enlarge)</span> 

     <br clear="all" /> 
    </div> 
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6LfzMMwSAAAAADV6D04jDE6fKwrJ57dXwOEW-vY3&lang=en"></script> 

Answer 1

$("#recaptcha_widget img").one('load',function(){ 
    $("#recaptcha_widget img").addClass('largecap'); 
    $('#recaptcha_image').css('height', '62px'); 
}); 

Esto pondrá una sola vez oyente en el evento de carga de la imagen que vuelve a cargar y luego ejecuta el código folowing.

que utilizan .one() en lugar de .load() aquí, ya que no desea adjuntar una nueva escucha cada vez que llame reloadCAP()

Editar

Ok, así que esto es lo que creo es el problema. Cuando llame al Recaptcha.reload(), eliminará el <img /> y lo reemplazará por uno nuevo. Entonces, cuando estamos tratando de adjuntar el evento, se eliminará a medida que se elimine la imagen.

Lo que hay que hacer es colocar la clase largecap en el recaptcha_image div y modificar su estilo css para parecerse

.largecap img { 
    height: whatever; 
    width: whatever; 
} 

Answer 2

No

la solución ideal, pero se puede poner el código anterior addClass Recaptcha.reload() y acaba de retrasarlo por un segundo o dos.

Espero que ayude.

Answer 3

Suena como lo que realmente necesita es tematización encargo de tal manera que puede estilo el captcha/image/etc exactamente como sea necesario: https://developers.google.com/recaptcha/docs/customization

Si desea mantener su implementación actual, puede conectar las funciones de devolución de llamada incorporadas (y no documentadas) de Recaptcha antes de llamar a Recaptcha.create().

//Called after Recaptcha.reload() is finished loading 
Recaptcha._alias_finish_reload = Recaptcha.finish_reload; 
Recaptcha.finish_reload = function (challenge, b, c) { 
    //Call original function that creates the new img 
    Recaptcha._alias_finish_reload(challenge, b, c); 

    $("#recaptcha_widget img").toggleClass('largecap', true); 
} 

//Called when the initial challenge is received on page load 
Recaptcha._alias_challenge_callback = Recaptcha.challenge_callback; 
Recaptcha.challenge_callback= function() { 
    //Call original function that creates the new img 
    Recaptcha._alias_challenge_callback(); 

    $("#recaptcha_widget img").toggleClass('largecap', true); 
} 

La razón por la que aún está teniendo este problema se debe a que Reconocer texto destruye y crea un nuevo cada vez img se vuelven a cargar, por lo que el estilo que ha añadido manualmente se perderá.