recaptcha.reload（）が終了した後にコードを実行します

Question

以下の関数がrecaptchaイメージをリロードするために呼び出されています。それは動作し、イメージをリロードしますが、その後は何もしません。基本的にフォームは小さく、このrecaptchaを持っているので、私はそれを縮小してクリックして拡大することができます。人がreloadCAP（）を呼び出す "別のキャプチャを取得"を押すと、クラスに大きな画像があるかどうかを確認します。それは私は新しいイメージがロードされた後に要素にそのクラスとCSSを追加する必要がある場合、私はそれが動作するように見えることはできません。何か案は？

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

ここで、このためのHTMLです：

<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'); 
}); 

これは、あなたがリロードされている画像の読み込みイベントにリスナーのみ1時間をかけ、その後、folowingコードを実行します。

私はここ.one()の代わり​​を使用し、新しいリスナーを添付する必要はありませんので、あなたが

編集reloadCAP()

を呼び出すたびに[OK]を、ので、ここで私は問題があると考えているものです。 Recaptcha.reload()に電話すると、<img />が削除され、新しいものに置き換えられます。イベントをアタッチしようとすると、イメージが削除されると削除されます。何をする必要が

場所はrecaptcha_imageのdivにクラスlargecapであり、それはあなたが実際にあなたがキャプチャのスタイルを設定できることを、カスタムテーマ設定などで必要なもののように聞こえる

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

Answer 2

ない理想的なソリューションがありますが、（Recaptcha.reload上addClassコードを置く）と、ちょうど1秒か2秒でそれを遅らせることができます。

希望に役立ちます。

Answer 3

のように見えるためにあなたのCSSスタイルを変更します/ image/etc：https://developers.google.com/recaptcha/docs/customization

現在の実装に固執したい場合は、Recaptcha.create（）を呼び出す前にRecaptchaに組み込まれている（および文書化されていない）コールバック関数を利用できます。

//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); 
} 

reCAPTCHAのは破壊し、作成する新しいIMGを毎回それをリロードするので、あなたが手動で追加したスタイリングが失われるので、あなたも、この問題を抱えている理由があります。