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

Question

我正在添加ReCAPTCHA到一个（引导哲基尔）网站，有多个联系人表单。页脚有一个弹出模式，偶尔有一个“立即联系我们”部分，还有几个页面上有一个“请求更多关于____的信息”。

由于我在一个页面上有多个联系人表单，所以我需要显式呈现每个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)，但是如果我登陆到一个只有一个联系人表单的页面上，控制台会抛出一个错误（未捕获的错误：ReCAPTCHA placeholder元素必须是一个元素或id）。

ReCAPTCHA似乎可以正常工作，但谁能帮助我理解是什么导致了这个错误？我所做的所有研究都表明这是因为两次导入库，但我假设情况并非如此，因为问题只出现在某些页面上而不是其他页面上。

谢谢！

Answer 1

我得到了同样的问题，这个解决方案对我不起作用，但我已经找到了一个。

事实上，我使用了插件wordpress联系表单7，不幸的是，我在集成部分中编写了recaptcha的键。

这使得函数recaptcha/api.js被调用了两次，并犯了这个错误。

因此，我刚刚删除了插件并重新安装它，而不填充集成部分，并在文件header.php和footer.php中调用recatpcha，这就起作用了：）

别忘了在联系人表单中放入recaptcha按钮

<div class="g-recaptcha" id="YOUR-ID" data-sitekey="YOUR-KEY" render="explicit"></div>

Answer 2

这对我有用：

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