如何在单个页面启用多个reCAPTCHA

Question

我在单个页面中实现了两个reCAPTCHA，但只有一个是有效的。

我的代码是针对验证码1的。

    <div class="resumator-label resumator-resume-text" id="resumator-recaptcha_forward-label">Human Check*</div>
    <div class="resumator-input" id="resumator-recaptcha_forward-field">
        <div id="div_error_resumator-forward-recaptcha-value" class="dv_error"><span>Please enter the text:</span></div><script type="text/javascript" src="//www.google.com/recaptcha/api/challenge?k=6Ld99tsSAAAAAIy-Zv3YKxCOefk2IXELOBVNhM7Y"></script>

<noscript>
    <iframe src="//www.google.com/recaptcha/api/noscript?k=6Ld99tsSAAAAAIy-Zv3YKxCOefk2IXELOBVNhM7Y" height="300" width="500" frameborder="0"></iframe><br/>
    <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
    </div>

其他验证码的代码

         <div class="resumator-field-wrapper resumator-resume-text" id="resumator-recaptcha">
    <div class="resumator-label resumator-resume-text" id="resumator-recaptcha-label">Human Check*</div>
    <div class="resumator-input" id="resumator-recaptcha-field">
        <script type="text/javascript" src="//www.google.com/recaptcha/api/challenge?k=6Ld99tsSAAAAAIy-Zv3YKxCOefk2IXELOBVNhM7Y"></script>

<noscript>
    <iframe src="//www.google.com/recaptcha/api/noscript?k=6Ld99tsSAAAAAIy-Zv3YKxCOefk2IXELOBVNhM7Y" height="300" width="500" frameborder="0"></iframe><br/>
    <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
    </div>
</div>

我也使用了克隆（clone）功能，效果很好。

// 复制我们的 reCapcha

         $('#resumator-recaptcha-label').html($('#resumator-recaptcha_forward').clone(true,true));

克隆验证码存在问题，重新加载验证码以及其他链接对于新的克隆验证码无法正常工作。

- Sohail Yasmin

---

可能是重复的问题：如何在单个页面上显示多个reCAPTCHA？ - Huseyin Yagli

请查看我在类似问题上的答案：如何从同一页中访问多个独立的reCAPTCHA响应？ - Michael Moriarty

Answer 1

您可以尝试在第二个recaptcha加载按钮中添加新类，然后使用点击事件在该类上绑定事件，并再次克隆节点。此外，还可以使用setTimeout函数等待重新绘制验证码。

希望这能帮到您。

 setTimeout(function() {
        $( "#resumator-recaptcha #recaptcha_widget_div #recaptcha_reload_btn " ).addClass("reload_captcha");


         $(document).on('click', '.reload_captcha', function(e){
             $('#resumator-recaptcha-label').html($('#resumator-recaptcha_forward').clone(true,true));

             $( "#resumator-recaptcha #recaptcha_widget_div #recaptcha_reload_btn " ).addClass("reload_captcha");


        });

    }, 2000);

- Haseeb