未捕获的错误:ReCAPTCHA占位符元素必须是元素或id

Question

我正在将ReCAPTCHA添加到具有多个联系表单的(Bootstrap Jekyll)网站.页脚中有一个弹出模式,偶尔会"立即联系我们"部分,还会在几个页面上"请求有关____的更多信息".

由于我在一个页面上有多个联系表单,因此我需要显式呈现每个ReCAPTCHA.这是代码:

在我的javascript中:

var CaptchaCallback = function() {
    grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey'
    });

    grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey'
    });
};

页脚(包含在所有页面中)

<div id="RecaptchaField1"></div>

(并在页脚的底部)

<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script>

这在有两个单独的联系表单的页面上运行良好(即我在页面上有另一个div,其id为RecaptchaField2),但如果我登陆的页面只有一个联系表单,则控制台会抛出错误(未捕获的错误:ReCAPTCHA占位符元素必须是元素或id).

ReCAPTCHA似乎无论如何都有用,但任何人都可以帮助我理解导致此错误的原因吗？我所做的所有研究都表明它是从导入库两次,但我认为情况并非如此,因为问题只出现在某些页面而不是其他页面上.

谢谢!

Answer 1

这对我有用:

var CaptchaCallback = function() {
    if ( $('#RecaptchaField1').length ) {
        grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey'
        });
    }
    if ( $('#RecaptchaField2').length ) {
       grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey'
       });
    }
};