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

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

因为我在一个页面上有多个联系人表单，所以我需要显式地呈现每个ReCAPTCHA。下面是代码：

在我的javascript中：

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

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

页脚内（包括在所有页面上）

（位于页脚底部）

这在有两个单独的联系人表单的页面上运行良好（即，我在页面上有另一个div，id为RecaptchaField2），但如果我在只有一个联系人表单的页面上登录，控制台将抛出错误（未捕获错误：ReCAPTCHA占位符元素必须是元素或id）

ReCAPTCHA似乎无论如何都能工作，但是有人能帮助我理解是什么导致了这个错误吗？我所做的所有研究都表明，这是因为导入了两次库，但我假设不是这样，因为问题只出现在某些页面上，而不是其他页面上

谢谢大家!

这对我很有用：

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

---

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

事实上，我使用了wordpress Contact form 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>

---

您也可以用纯java脚本的方式使用它

grecaptcha.render(document.getElementById('RecaptchaField1'), {
      'sitekey' : 'my_sitekey'
    });

---

这么简单，为什么我没想到呢？我最终使用了each（），但这也同样有效，因为我在一个页面上只有两三个。谢谢大家!@珍妮，你的解决方案是正确的，为我工作，谢谢！在这种情况下，如何读取响应？由于我们并不总是呈现所有CAPTCHA，所以我的代码中有多个recaptcha绑定到不同的字段，其中一个recaptcha绑定到的字段被注释掉了&因此它给出了这个错误，在删除不需要的recaptcha后问题得到了解决

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

grecaptcha.render(document.getElementById('RecaptchaField1'), {
      'sitekey' : 'my_sitekey'
    });