ReCaptcha：「綁定參數必須是元素或ID」

Question

ReCaptcha已停止在我們的淘汰網站上工作。

我在控制檯中出現以下錯誤：

Uncaught Error: The bind parameter must be an element or id 
    at kr (recaptcha__en.js:369) 
    at nr (recaptcha__en.js:373) 
    at Object.or [as render] (recaptcha__en.js:374) 
    at loadReCaptcha (KnockoutBindings.js:135) 
    at KnockoutBindings.js:143 

我有一個自定義綁定來處理的reCAPTCHA。

ko.bindingHandlers.reCaptcha = { 
    init: function (element, valueAccessor) { 

     var val = ko.utils.unwrapObservable(valueAccessor()), 
      key = ko.utils.unwrapObservable(val.key), 
      callback = val.callback;      

     function loadReCaptcha() { 
      if (typeof grecaptcha !== "undefined") { 
       grecaptcha.render(element.id, { 
        'sitekey': key, 
        'theme': 'light', 
        'callback': callback 
       }); 
      } 
      else { 
       setTimeout(function() { 
        loadReCaptcha(); 
       }, 150); 
      } 
     } 

     loadReCaptcha(); 
    } 
}; 

這是以前的工作，但已停止工作近期：

<div id="reCaptcha" data-bind="reCaptcha: {key: 'my-key', callback: reCaptchaResponse}"></div> 

的處理。

我已經檢查：

• 的關鍵仍然是有效的
• 的ReCaptcha DIV被加載並可見
• 試圖改變ID /使用另一個DIV
• 試圖傳遞元素，而不是編號爲

使用谷歌搜索確切的錯誤「綁定參數必須是一個元素或ID」只給出鏈接recaptcha.js文件。

我找不到任何有關錯誤實際含義或解決方法的信息。

我也在頁面右下角收到一條消息「此站點密鑰未啓用不可見的驗證碼。」但我相信這是reCaptcha未加載的副作用。

Answer 1

我有完全相同的問題。事實證明，問題實際上是「數據綁定」屬性。不知道爲什麼它「停止」工作，但我假設谷歌可能會引入一個名爲「綁定」的新屬性。

我改變了我的綁定，在元素內創建一個div，從而確保元素根本沒有數據屬性。

如果您更改綁定到這一點，它應該工作：

ko.bindingHandlers.reCaptcha = { 
    init: function (element, valueAccessor) { 

     var val = ko.utils.unwrapObservable(valueAccessor()), 
      key = ko.utils.unwrapObservable(val.key), 
      callback = val.callback; 

     function loadReCaptcha() { 
      if (typeof grecaptcha !== "undefined") { 
       var $target = $('<div />').appendTo($(element)); 
       grecaptcha.render($target[0], { 
        'sitekey': key, 
        'theme': 'light', 
        'callback': callback 
       }); 
      } 
      else { 
       setTimeout(function() { 
        loadReCaptcha(); 
       }, 150); 
      } 
     } 

     loadReCaptcha(); 
    } 
};