我有一个使用多个recaptcha的页面,如下所示:

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script>
    var recaptchaElements = [];
</script>

@foreach (var item in Model)
{
   ...
<button class="g-recaptcha id="recaptcha-comment-form-button-@(item.Id)" type="button" value="comment">Submit</span></button>
   ...

<script>
    function @(functionId)submit(token) {
               ....
            }
    recaptchaElements.push({ id: "recaptcha-comment-form-button-@(item.Id)", callback : "@(functionId)submit" });
</script>
}
<script>
var recaptchaKey = "XXXX"
    var onloadCallback = function () {
        for (var i = 0; i < recaptchaElements.length; i++) {
            grecaptcha.render(recaptchaElements[i].id, {
                'sitekey': recaptchaKey,
                'callback': recaptchaElements[i].callback,
                'theme': 'light'
            });
        }
    };
</script>

我正在为每个recaptcha按钮创建一个独特的回调函数,因为我需要为每个按钮提供独特的功能 . 那很有效 .

我遇到的问题是,当我点击我的按钮然后我选择图像以证明我不是机器人时,重新打开小部件会打开 . 一旦我选择了一些图像,它就会使用成功的令牌进行回调,并且我使用Google验证令牌并且一切正常 . 问题是图像的小部件没有关闭 . 它仍然是开放的,只要我继续选择图像,它就会继续激活我的回调函数,因此不知道用户多次提交相同的回调 .

如何强制recaptcha小部件在回调函数中关闭?是否应该在用户验证时自动关闭?有谁知道为什么会这样?