将 DOM 元素替换为 jQuery 后无法重新呈现 Google reCAPTCHA v2

Can't re-render Google reCAPTCHA v2 after replacing the DOM element with jQuery

我有一个 ASP.Net MVC 应用程序,它在页面加载时在包含 Google reCAPTCHA v2 元素的部分视图中呈现表单。该页面可能包含一个或多个局部视图实例,我们使用数据属性自动呈现 reCAPTCHA,一切正常。

但是,使用 jQuery $.ajax POST 回发表单实例,如果存在任何服务器端验证问题,则原始部分视图是重新渲染并返回到 ajax 调用,页面上的表单内容使用 jQuery replaceWith 方法替换。这意味着 reCAPTCHA 附加到的原始 div 已从 DOM 中删除,并添加了一个新元素(因此丢失了 reCAPTCHA IFrame)。

问题是我无法在 reCAPTCHA api 中找到任何方法来让它重新附加到新元素(并重新呈现 IFrame)或删除原始元素实例,并在新元素上手动调用 grecaptcha.render。如果我尝试在新元素上调用 render 方法,我会收到一条错误消息,指出 'reCAPTCHA has already been rendered in this element'.

有没有人成功让 reCAPTCHA 处理通过 ajax 动态更新的内容?

我设法通过动态地将随机字符串添加到要包装 reCAPTCHA 的元素的 id 中来做到这一点。在此之后,我再也没有遇到加载 reCAPTCHA 的问题。您必须生成这个随机字符串(我们称它为令牌),然后使用此令牌创建元素,稍后当您传递 id 以呈现 reCAPTCHA 时。