Question

I have a function below which is called to reload a recaptcha image. It works, reloads the image but won’t do anything after that. Basically the form is small that has this recaptcha on it so I’ve shrunk it and allowed for clicking to enlarge and all that. If the person presses “get another captcha” which calls reloadCAP() it checks to see if it has the class of being the larger image. if it does i need it to add that class and css back to the elements AFTER the new image has loaded but I can’t seem to get it to work. Any ideas?

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

here’s the html for this:

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

This will put a one time only listener on the load event of the image that you are reloading and then executes the folowing code.

I used .one() instead of .load() here because you don’t want to attach a new listener every time you call reloadCAP()

Edit

Ok, so here’s what I believe the issue is. When you call Recaptcha.reload() it is removing the <img /> and replacing it with a new one. So when we are trying to attach the event it is getting removed as the image gets removed.

What you need to do is place the class largecap on the recaptcha_image div and modify your css style to look like

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