Как повесить свое событие на google captcha?

Question

[bk_maestro]

Суть вопроса заключается в том, что мне необходимо повесить событие на google captcha и после уже обработать это событие в js. Т.е. у меня есть сайт на wp, там стоит contact form 7, я вешаю по стандарту событие на капчу (на любой блок абсолютно все перепробовал) ничего не происходит, она не реагирует на него.
Пробовал делать так, к примеру

$(document).click(function(event) {
	alert('was click to document');
})

Но если я кликаю по капче ничего не происходит, на любой другой элемент - все окей, работает.
Пробовал делать через data-callback, тоже безуспешно, пишет, что: ReCAPTCHA couldn't find user-provided function: checkCallBack()
Код, который я использовал для этого способа -

$('.g-recaptcha').attr('data-callback', 'checkCallBack()');
function checkCallBack() {
       alert('success function');
}

Соблюдаю всю последовательность скриптов, использую атрибут defer.
Сайт - https://rckrt.ru/voprosy_polzovatelej/
P.s. так же использую

$(document).ready(function() {

} )

Answer 1

[Александр]

В доках все написано

<script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
        widgetId1 = grecaptcha.render('example1', {
          'sitekey' : 'your_site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.render(document.getElementById('example2'), {
          'sitekey' : 'your_site_key'
        });
        grecaptcha.render('example3', {
          'sitekey' : 'your_site_key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
</script>

Comments

[bk_maestro]

Хороший ответ, но мне нужно немного другое. Т.е. у меня captcha генерируется в contact form 7, мне необходимо лишь повесить на нее событие.

[Александр]

bk_maestro, и в чем проблема?
если нужно обработать на конкретной страницы то

var verifyCallback = function(response) {
        if(location.href !== 'нужная страница') return;
        alert(response);
      };

если проверить по классу то только на определенный элемент навесить событие

grecaptcha.render('example3', {
          'sitekey' : 'your_site_key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });

[bk_maestro]

lebonnet, прописал вот такой код, эффекта нету

grecaptcha.render('.g-recaptcha', {
          'sitekey' : '6LeUDWoUAAAAAEIvhqEviRgNK8tvxg7YpG-xxxx',
          'callback' : 6LeUDWoUAAAAAAz2pLqVlFo2W7nybkvUGBxxxx,
          'theme' : 'dark'
        });
		
	var verifyCallback = function(response) {
		alert(response);
        };

И вот такой ответ в консоли Error: reCAPTCHA has already been rendered in this element

[Александр]

bk_maestro, а так?

grecaptcha.render('.g-recaptcha', {
          'sitekey' : '6LeUDWoUAAAAAEIvhqEviRgNK8tvxg7YpG-xxxx',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
    
  var verifyCallback = function(response) {
    alert(response);
        };

[bk_maestro]

lebonnet,
Нет, не помогло..

[Александр]

bk_maestro, но первым делом нужно чтобы в консоле браузера не было ошибок, а вторым посмотреть как приляпать капчу, ссылка на доки выше (поэтому эта ошибка 'reCAPTCHA has already been rendered in this element')

[bk_maestro]

lebonnet, до того, как я начал использовать grecaptcha.render проблем в консоли не было.

[bk_maestro]

lebonnet, и да, фишка в том, что contact form 7 сама генерирует капчу, поэтому мне необходим лишь ответ, а не генерация капчи

[Александр]

bk_maestro, открываю код страницы
строка 381 < script src="https://www.google.com/recaptcha/api.js" async defer>< /script >
строка 1392 < script type='text/javascript' src='https://www.google.com/recaptcha/api.js?onload=rec...' >< /script >

зачем два раза?
там полно ошибок на сайте
строка 1321, может это и есть callback, и ничего писать не надо было, а просто присоседиться в тот код?

[Александр]

bk_maestro, в общем надо так:

$(document).ready(function () {
$('.g-recaptcha').attr('data-callback', 'checkCallBack');
});
function checkCallBack(params) {
       alert('параметры в консоле');
       console.log(params);
}

[bk_maestro]

lebonnet, ReCAPTCHA couldn't find user-provided function: checkCallBack

[Александр]

bk_maestro, если не прям очень хочется запихать checkCallBack в документ реди, то делай так:

window.checkCallBack = function (params) {
       alert('параметры в консоле');
       console.log(params);
}

а так для того что бы писать на js, нужно понимать зачем функции оборачивать в документ реди, и что такое область видимости