Recaptcha: "the Bind Parameter Must Be An Element Or Id"

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.j

Solution 1:

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".

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;

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