验证码："The bind parameter must be an element or 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。

 <div id="reCaptcha" data-bind="reCaptcha: {key: 'my-key', callback: reCaptchaResponse}"></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") {
                grecaptcha.render(element.id, {
                    'sitekey': key,
                    'theme': 'light',
                    'callback': callback
                });
            }
            else {
                setTimeout(function () {
                    loadReCaptcha();
                }, 150);
            }
        }

        loadReCaptcha();
    }
};

这以前是有效的，但最近停止了。

我检查过：

密钥仍然有效
reCaptcha div 已加载并可见
尝试将 Id/using 换成另一个 div
尝试传递元素而不是 id

谷歌搜索确切的错误 "The bind parameter must be an element or id" 只给出指向 recaptcha.js 文件中的行的链接。

我找不到有关错误实际含义或解决方法的任何信息。

我还在页面右下角收到一条消息"This site key is not enabled for the invisible captcha."但我相信这是 reCaptcha 未加载的副作用。

Answer 1

我遇到了完全相同的问题。原来问题其实出在"data-bind"属性上。不确定它 "stopped" 工作的原因，但我假设 google 可能会引入一个新的属性，名称为 "bind"。

我更改了绑定以在元素内创建 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();
    }
};

验证码："The bind parameter must be an element or id"

ReCaptcha: "The bind parameter must be an element or id"

javascript

recaptcha

knockout.js