未捕獲的錯誤：ReCAPTCHA佔位符元素必須是元素或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，其中包含Reca的ID ptchaField2），但是如果我着陸在只有一個聯繫表單的頁面上，控制檯會拋出一個錯誤（未捕獲錯誤：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' 
     }); 
    } 
};