2016-12-14 75 views
4

我將ReCAPTCHA添加到具有多個聯繫人表單的(Bootstrap Jekyll)網站。在頁腳中有一個彈出窗口模式,偶爾會有「與我們聯繫」部分,並且在幾個頁面上還有一個「請求關於____的更多信息」。未捕獲的錯誤:ReCAPTCHA佔位符元素必須是元素或ID

由於我在單個頁面上有多個聯繫表單,所以我需要明確地呈現每個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似乎無論如何工作,但任何人都可以幫助我理解是什麼導致了這個錯誤?我所做的所有研究都表明,它是從導入庫兩次,但我認爲情況並非如此,因爲問題只出現在某些頁面上,而不是其他頁面上。

謝謝!

回答

11

這個工作對我來說:

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

這麼簡單,爲什麼我沒有想到呢?我最終使用了each(),但是這樣可以很好地工作,因爲我在頁面上只有兩個或三個。謝謝! – avp

+0

@珍妮你的解決方案是正確的爲我工作謝謝! –

相關問題