Javascript Boostrap Ajax模式与Google reCaptcha-调用验证码挑战无法运行两次

我试图在引导模式中实现一个CTA表单，其中内容是异步加载的。 因此，每当我打开模态时，它的内容都会动态生成并插入模态中

为了呈现验证码，我使用引导模式的open事件。基本上，我仅在模态内容显示时才应用验证码：

        self.$modal.on('shown.bs.modal', function () {
            $('.bootstrap.modal-backdrop.fade.in').css("z-index", 1059);
            var form = $("#cta-modal-holder form.callToAction");
            var captchaCheckNeeded = form.attr('data-captcha');


            //Check if we need to apply captcha on the form
            if (captchaCheckNeeded.toLowerCase() == 'true') {
                //This apply the render() method on the form using an invisible <div>
                IMD.Website.Cms.GoogleCaptcha(form[0]);
            }
        });

这在第一个模态打开时非常有效。问题是，当我关闭模式，然后重新打开它时，captcha.render会执行此任务，但当尝试在客户端验证后发送表单时，grecaptcha.execute不再挑战用户

我确信captcha方法得到了很好的应用，并且使用了正确的ID，因为它第一次就可以完美地工作。 在Google API方面看得更详细一些，当我在第二次呈现验证码后尝试使用getResponse时，我发现了recaptcha API中的以下错误：

未捕获的TypeError:无法读取null的属性“值”

事实上，在以下代码中：

var Do = function(a) {
    var b = window.___grecaptcha_cfg.clients[a || 0];
    if (!b)
        throw Error("Invalid ReCAPTCHA client id: " + a);
    return vg(qo(b.id)).value
}

//Here, vg(qo(b.id)) represents the field g-recaptcha-response at the first 
call of the getResponse() method.
//At the second call, this value is null, even if I clearly see the field in 
my form after calling the render() method.

然后，这将阻止发送从未触发验证码挑战的表单

让我精确地说，我试图在模式结束时重置验证码，这是很好的应用，但这并不能改变问题

我已经尽可能清楚，不容易总结这种问题，任何帮助都将不胜感激

---

致以最诚挚的问候，

我也遇到过类似的问题，我已经找到了解决办法。关闭模式后，尝试从全局窗口中删除验证码配置，如下所示：

window['___grecaptcha_cfg'] = undefined;

在我们的案例中，这解决了问题

window['___grecaptcha_cfg'] = undefined;