jQuery 未捕获的错误：ReCAPTCHA 占位符元素必须是元素或 ID
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41132750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught Error: ReCAPTCHA placeholder element must be an element or id
提问by avp
I'm adding ReCAPTCHA to a (Bootstrap Jekyll) website that has multiple contact forms. There's a popup modal in the footer, an occasional "contact us now" section, and also a "request more information about ____" on several pages.
我正在将 ReCAPTCHA 添加到具有多个联系表单的（Bootstrap Jekyll）网站。页脚中有一个弹出式模式，偶尔有一个“立即联系我们”部分，还有几个页面上的“请求有关 ____ 的更多信息”。
Since I have multiple contact forms on a single page, I needed to explicitly render each ReCAPTCHA. Here's the code for that:
由于我在一个页面上有多个联系表单，我需要显式呈现每个 ReCAPTCHA。这是代码：
In my javascript:
在我的 javascript 中：
var CaptchaCallback = function() {
grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey'
});
grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey'
});
};
In footer (included on all pages)
在页脚中（包含在所有页面中）
<div id="RecaptchaField1"></div>
(and at the bottom of the footer)
（并在页脚底部）
<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script>
This works well on a page that has two separate contact forms (i.e. I've got another div on the page with the id of RecaptchaField2), but if I land on a page that only has one contact form, the console throws an error (Uncaught Error: ReCAPTCHA placeholder element must be an element or id).
这在具有两个单独联系表单的页面上运行良好（即我在页面上有另一个 div，其 id 为 RecaptchaField2），但是如果我登陆一个只有一个联系表单的页面，控制台会抛出错误（未捕获的错误：ReCAPTCHA 占位符元素必须是元素或 ID）。
The ReCAPTCHA seems to work anyway, but can anyone help me understand what's causing this error? All the research I've done indicates that it's from importing the library twice, but I'm assuming that's not the case, since the problem only comes up on some pages and not others.
ReCAPTCHA 似乎无论如何都可以工作，但是有人可以帮助我了解导致此错误的原因吗？我所做的所有研究都表明它来自两次导入库，但我假设情况并非如此，因为问题仅出现在某些页面上，而不出现在其他页面上。
Thank you!
谢谢！
回答by Jenny
This works for me:
这对我有用：
var CaptchaCallback = function() {
if ( $('#RecaptchaField1').length ) {
grecaptcha.render('RecaptchaField1', {'sitekey' : 'my_sitekey'
});
}
if ( $('#RecaptchaField2').length ) {
grecaptcha.render('RecaptchaField2', {'sitekey' : 'my_sitekey'
});
}
};
回答by Hugo Blogueur
I got the same issue and this solution didn't work for me, but I have found one.
我遇到了同样的问题，这个解决方案对我不起作用，但我找到了一个。
The fact was I used the plugin wordpress Contact form 7 and , unfortunately, I have written the keys of recaptcha in the integration part.
事实上，我使用了插件 wordpress Contact form 7，不幸的是，我在集成部分写了 recaptcha 的密钥。
This made the function recaptcha/api.js was called twice and made this error.
这使得函数 recaptcha/api.js 被调用两次并出现此错误。
So I have just deleted the plugin and reinstall it without fill the integration part and called the recatpcha in the files header.php and footer.php and that works :)
所以我刚刚删除了插件并重新安装它而不填充集成部分并在文件 header.php 和 footer.php 中调用了 recatpcha 并且有效:)
And don't forget to put the button recaptcha in the contact form
并且不要忘记将按钮recaptcha放在联系表格中
<div class="g-recaptcha" id="YOUR-ID" data-sitekey="YOUR-KEY" render="explicit"></div>
回答by sandeep kumar
You can also use this in pure java script way
您也可以以纯 java 脚本方式使用它
grecaptcha.render(document.getElementById('RecaptchaField1'), {
'sitekey' : 'my_sitekey'
});
