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

我正在将 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>

这在具有两个单独的联系表单的页面上效果很好（即，我在页面上有另一个 ID 为 RecaptchaField2 的 div），但如果我登陆到只有一个联系表单的页面，控制台会抛出错误（未捕获错误：ReCAPTCHA 占位符元素必须是元素或 id）。

无论如何，ReCAPTCHA 似乎都可以工作，但任何人都可以帮助我了解导致此错误的原因吗？我所做的所有研究都表明这是由于两次导入库造成的，但我假设情况并非如此，因为问题只出现在某些页面上，而不是其他页面上。

谢谢你！

这对我有用：

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