Question

我一直在尝试在Bootstrap popovers（弹出窗口）中实现新的recaptcha。它在后备模式下工作，但是在标准模式下它只在需要“我不是机器人”复选框时才有效，而不是额外的弹出谜题，它会弹出但会立即被摧毁。

我不知道错误是来自Google或我自己的Bootstrap / jQuery代码。有没有人有任何建议？

到目前为止，这是我的代码，需要API密钥：

//prevent links
$(document).on("click", "a", function(e) {
  e.preventDefault();
});

$(document).on("click", "button", function(e) {
  e.preventDefault();
});
// new beverage popup handler
$('#button').popover({
  selector: '#new_popup',
  placement: 'auto',
  container: 'body',
  html: true,
  // trigger:'focus',
  title: function() {
    return $("#popover-head").html();
  },
  content: function() {
    //create div for actual popover, to get info in handler below
    var content = $('#popover-content').clone();
    var captcha_div = content.find("#captcha")[0];
    console.log(captcha_div);
    grecaptcha.render(captcha_div, {
      'sitekey': 'some-key'
    });
    return '<div id="actual-popover-content">' + content.html() + '</div>';
  }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <div class="jumbotron">

      <div class="row">
        <div class="col-md-6">
          <div class="panel panel-default" , id="button">
            <button class="form-control pop-function" id="new_popup" rel="popover">Add entry</button>
          </div>
        </div>
      </div>

      <!-- popover -->
      <div class="row">
        <div class="col-md-6">
          <div id="popover-head" class="hide">New entry</div>
          <div id="popover-content" class="input-group hide">
            <div class="list-group">
              <form>
                <div class="input-group">
                  <input type="text" class="list-group-item form-control" placeholder="Name">
                  <span class="input-group-addon">Name</span>
                </div>

                <div class="input-group" id="captcha"></div>
                <br>
                <button class="btn btn-primary">Add</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src='http://www.google.com/recaptcha/api.js?hl=en&render=explicit' async defer></script>

在Twitter Bootstrap popovers中，reCAPTCHA v2（No CAPTCHA）失败

0 个答案: