如何在 HTML 元素（reCaptcha）中使用 jQuery 选择器？

Question

业余时间在这里。

我有一个现有的 HTML 联系表。 这不是我的代码。 这是它的一个总结版本。 它有一个输入字段是一个按钮。 当单击按钮时定义了一个 function，我相信它包含在 jQuery 选择器中。 这个 function 然后调用表单的提交 function，也包裹在 jQuery 中。

 $("#contact-form.submit-button").on("click", function (e) { $("#contact-form").submit() } $("#contact-form").on("submit", function (e) { })

当我添加一个 reCaptcha 时，我可以提供一个回调 function。 我想直接调用表单的提交function。 我试过了：

 <div style="margin-top:5px;margin-bottom:15px;" id="reCaptcha" data-size="invisible" class="g-recaptcha" data-sitekey="myKey" data-callback="$(&quot;#contact-form&quot;).submit"></div>

但是，它似乎并没有做任何事情。 我想我可以添加一个助手 function，但是有没有直接的方法可以将表单的提交 function 传递给这个 reCaptcha HTML 元素？

Answer 1

这可能会给你一个开始的地方——基本上你想触发提交： $("#contact-form").trigger("submit");

这是一个完全未经测试的模型：

 $("#contact-form").on("click", '.submit-button', function(event) { $(event.delegateTarget).trigger('submit') }); $("#contact-form").on("submit", function(e) { e.preventDefault() console.log('I would submit'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://www.google.com/recaptcha/api.js?render=your reCAPTCHA site key here"></script> <script> grecaptcha.ready(function() { //request recaptcha token; response is promise grecaptcha.execute('your reCAPTCHA site key here', { action: 'validate_captcha' }).then(function(token) { // add token value to form document.getElementById('g-recaptcha-response').value = token; //trigger submit $("#contact-form").trigger("submit"); }); }); </script> <form id="contact-form"> <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response"> <input type="hidden" name="action" value="validate_captcha"> mything: <input id="my-thing" /> <button type="submit" name="submit">Submit Me</button> </form>