注意:"bind参数必须是元素或id". [英] ReCaptcha: "The bind parameter must be an element or id"

问题描述

ReCaptcha已停止在我们的淘汰赛网站上工作.

ReCaptcha has stopped working on our knockout site.

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

I get the following error in the console:

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.

I have a custom binding to handle the 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();
    }
};

此功能以前有效，但最近已停止工作.

This was previously working but has stopped working recently.

我已检查:

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

Google搜索确切的错误"bind参数必须是元素或id"仅提供了指向recaptcha.js文件中该行的链接.

Googling the exact error "The bind parameter must be an element or id" only gives links to the line in the recaptcha.js file.

我找不到有关该错误实际上意味着什么或如何解决的任何信息.

I cannot find any information on what the error actually means or how to resolve it.

我还在页面的右下角收到一条消息:此站点密钥未启用不可见的验证码."但是我相信这是reCaptcha无法加载的副作用.

I am also getting a message in the bottom right corner of the page "This site key is not enabled for the invisible captcha." But I believe this is a side effect of the reCaptcha not loading.

推荐答案

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

I had exactly the same issue. It turns out that the problem is actually the "data-bind" attribute. Not sure why it "stopped" working, but I'm assuming google will probably introduce a new property with the name "bind".

我更改了绑定以在元素内创建一个div，从而确保该元素完全没有数据属性.

I changed my binding to create a div within the element, thus ensuring that the element has no data attributes at all.

如果您更改对此的绑定，它应该起作用:

If you change your binding to this, it should work:

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

这篇关于注意:"bind参数必须是元素或id".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！