执行代码AFTER Recaptcha.reload（）完成后

Question

我在下面有一个函数被调用来重新加载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');
});

这将在您正在重新加载的图像的load事件上放置一次仅侦听器，然后执行以下代码。

我在这里使用.one()而不是.load() ，因为每次调用reloadCAP()都不想附加新的侦听器

编辑

好的，所以这就是我认为的问题。 当您调用Recaptcha.reload()它将删除<img />并将其替换为新的。 因此，当我们尝试附加事件时，它会在图像被删除时被删除。

你需要做的是将类largecap放在recaptcha_image div上并修改你的css样式

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

Answer 2

听起来您实际需要的是自定义主题，以便您可以根据需要设置验证码/图像/等样式： 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，因此你手动添加的样式将会丢失。

Answer 3

不是理想的解决方案，但您可以将addClass代码放在Recaptcha.reload（）之上，并将其延迟一两秒。

希望有所帮助。