javascript - 验证码: "The bind parameter must be an element or id"

Question

ReCaptcha 已停止在我们的 knockout 网站上运行。

我在控制台中收到以下错误:

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

我有一个自定义绑定(bind)来处理 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();
    }
};

这之前可以工作，但最近已停止工作。

我已经检查过:

• key 仍然有效
• reCaptcha div 已加载并可见
• 尝试更改 Id/使用另一个 div
• 尝试传递元素而不是 id

谷歌搜索确切的错误“绑定(bind)参数必须是元素或 id”只会提供指向 recaptcha.js 文件中的行的链接。

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

我还在页面右下角收到一条消息“此站点 key 未启用隐形验证码。”但我相信这是 reCaptcha 未加载的副作用。

Answer 1

我遇到了完全相同的问题。事实证明，问题实际上出在“data-bind”属性上。不知道为什么它“停止”工作，但我假设谷歌可能会引入一个名为“bind”的新属性。

我更改了绑定(bind)以在元素内创建一个 div，从而确保该元素根本没有数据属性。

如果您将绑定(bind)更改为此，它应该可以工作:

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();
    }
};