ReCaptcha:"绑定参数必须是元素或id"

时间:2017-10-10 02:02:38

标签: javascript knockout.js recaptcha

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 /使用其他div
  • 尝试传递元素而不是id

搜索确切的错误&#34;绑定参数必须是元素或ID&#34;只提供指向recaptcha.js文件中的行的链接。

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

我也在页面的右下角收到一条消息&#34;此网站密钥未启用隐形验证码。&#34;但我相信这是reCaptcha无法加载的副作用。

1 个答案:

答案 0 :(得分:4)

我有完全相同的问题。事实证明,问题实际上是&#34;数据绑定&#34;属性。不知道为什么它会停止&#34;工作,但我假设谷歌可能会推出一个名为&#34; bind&#34;的新房产。

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