Recaptcha v3 与 Jquery 选择器不兼容

问题描述

我已经在我网站的评论表单上实现了 Recaptcha v3（使用 staticman），但它似乎不想加载我用来显示响应的 jquery 函数。

相关代码如下：

(function ($) {
  console.log('On page load code ran');
  var $comments = $('.js-comments');

  $('#new-comment.js-form').submit(function () {
    console.log('js-form.onsubmit code ran');
    event.preventDefault();
    var form = this;

这是表格：

<form class="js-form form" id="new-comment" method="post" action="{{ site.staticman_url }}">
  <input type="hidden" name="options[origin]" value="{{ page.url | absolute_url }}">
  <input type="hidden" name="options[parent]" value="{{ page.url | absolute_url }}">
  <input type="hidden" id="comment-replying-to-uid" name="fields[replying_to_uid]" value="">
  <input type="hidden" name="options[slug]" value="{{ page.url | remove:'.html' | remove_first:'/' }}">
  <input type="hidden" name="options[reCaptcha][siteKey]" value="{{ site.reCaptcha.siteKey }}">
  <input type="hidden" name="options[reCaptcha][secret]"  value="{{ site.reCaptcha.secret }}">

  <div class="textfield">
    <label for="comment-form-message"><h2>Add Comment<small><a rel="nofollow" id="cancel-comment-reply-link" href="{{ page.url | absolute_url }}#respond" style="display:none;">(cancel reply)</a></small></h2>
      <textarea class="textfield__input" name="fields[message]" type="text" id="comment-form-message" placeholder="Your comment (markdown accepted)" required rows="6"></textarea>
    </label>
  </div>

    <div class="textfield narrowfield">
      <label for="comment-form-name">Name
        <input class="textfield__input" name="fields[name]" type="text" id="comment-form-name" placeholder="Your name (required)" required/>
      </label>
    </div>

    <div class="textfield narrowfield">
      <label for="comment-form-email">E-mail
        <input class="textfield__input" name="fields[email]" type="email" id="comment-form-email" placeholder="Your email (optional)"/>
      </label>
    </div>

    <div class="textfield narrowfield hp">
      <label for="hp">
        <input class="textfield__input" name="fields[hp]" id="hp" type="text" placeholder="Leave blank">
      </label>
    </div>

    <button class="button g-recaptcha" id="comment-form-submit"
        data-sitekey="{{ site.reCaptcha.siteKey }}"
        data-callback='onSubmit'
        data-action='submit'>
      Submit
    </button>

</form>

<script>
  function onSubmit(token) {
    console.log('james is great')
    event.preventDefault();
    document.getElementById("new-comment").submit();
  }
</script>

js-form.onsubmit 代码运行从未出现在我的日志中，即使我在使用 v2 时运行了该代码。

表单最终处理得很好，但发生的情况是页面重定向到评论处理程序，而不是向用户显示结果。所以我知道所有后端都很好，我只是无法让 recaptcha 正确地与 Ajax 通信。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）