未知のエラー：ReCAPTCHAプレースホルダー要素は要素またはIDでなければなりません

Question

複数の連絡先フォームを持つ（Bootstrap Jekyll）WebサイトにReCAPTCHAを追加します。フッタにはポップアップモーダルがあり、時折 "私達に今連絡してください"というセクションがあります。また、いくつかのページで "____の詳細情報をリクエスト"しています。

私は1つのページに複数の連絡先フォームがあるので、各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> 

これは、2つの別個の連絡フォームがあるページでうまくいきます（つまり、私はRecaのIDを持つ別のdivをページに持っていますptchaField2）、連絡先フォームが1つしかないページに着陸すると、コンソールでエラーが発生します（キャッチされていないエラー：ReCAPTCHAプレースホルダ要素は要素またはIDでなければなりません）。

ReCAPTCHAはとにかく動作するようですが、誰でもこのエラーの原因を理解するのを助けることができますか？私が行ったすべての研究は、ライブラリを2回インポートしたことを示していますが、それは問題ではないと仮定しています。

ありがとうございました！

Answer 1

これが私の作品：

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