jquery - Uncaught Error : ReCAPTCHA placeholder element must be an element or 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'
       });
    }
};