Contact Form 7 ajax callback not working

Question

Was trying to bind some events to Contact Form 7 for Wordpress, but the event was never called. ref ( Contact Form 7 AJAX Callback )

Here's my binding:

$('.wpcf7').on('invalid.wpcf7 spam.wpcf7 mailsent.wpcf7 mailfailed.wpcf7 submit.wpcf7'), function () {
  sb[9].tinyscrollbar_update('relative');
  console.log('invalid');
}

The console.log was never called. I'm binding all the events for testing or am I binding it wrong?

Answer 1

This worked for me:

jQuery(document).on('wpcf7:submit', function () {
        jQuery('#formAlerts').modal();
    });

    jQuery( document ).ajaxComplete(function( event,request, settings ) {

        var alertMessage = $(".wpcf7-response-output").html();
        jQuery(document).find("#formResponse").html(alertMessage);

        function sample() {
            if(jQuery('.wpcf7-form.invalid').length > 0){

        }else{
          jQuery('#formAlerts').modal('hide');
        }
        }

        setTimeout(sample, 2000);

  });

Answer 2

The event isn't bound on the wpcf7 element but rather on the document itself.

$(document).on('mailsent.wpcf7', function(event) {
    console.log(event)
})

Edit: after looking at the top answer from your link it might be but the above is the way that I've got it and it's working fine for me.

Edit 2: it looks like the events in the linked top answer is using different events which may be pushed from the form container and the ones you're trying to use look like the ones that are bound from the document.