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

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

我在这里使用了.one()而不是.load()，因为每次拨打reloadCAP()

时都不想附加新的听众

修改

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

您需要做的是将课程recaptcha_image放在.largecap img { height: whatever; width: whatever; } div上并修改您的css样式，使其看起来像

{{1}}

Answer 2

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

希望有所帮助。

Answer 3

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

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

3 个答案: