Ndtyjky

MY QUESTION

If the jQuery custom event is namespaced with a colon like 'wpcf7:mailsent' or 'wpcf7:submit', why or how does the DOM event NAME become wpcf7mailsent or wpcf7submit? Are they joined somehow by some DOM process?

MORE CONTEXT

Wordpress's Contact Form 7 provides several types of custom DOM events. When I look at the plugin's source code, I'm trying to understand how these names are created in the DOM and where they're coming from.

List of Contact Form 7 Custom DOM Events

• 
  wpcf7invalid — Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because there are fields with invalid input.


• 
  wpcf7spam — Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because a possible spam activity has been detected.


• 
  wpcf7mailsent — Fires when an Ajax form submission has completed successfully, and mail has been sent.


• 
  wpcf7mailfailed — Fires when an Ajax form submission has completed successfully, but it has failed in sending mail.


• 
  wpcf7submit — Fires when an Ajax form submission has completed successfully, regardless of other incidents.

Source: wp-plugins/contact-form-7 Github repo

The code that processes the form data (I think):

$.fn.wpcf7InitForm = function() {

        this.ajaxForm({

            beforeSubmit: function(arr, $form, options) {

                $form.wpcf7ClearResponseOutput();

                $form.find('[aria-invalid]').attr('aria-invalid', 'false');

                $form.find('img.ajax-loader').css({ visibility: 'visible' });

                return true;

            },

            beforeSerialize: function($form, options) {

                $form.find('[placeholder].placeheld').each(function(i, n) {

                    $(n).val('');

                });

                return true;

            },

            data: { '_wpcf7_is_ajax_call': 1 },

            dataType: 'json',

            success: $.wpcf7AjaxSuccess,

            error: function(xhr, status, error, $form) {

                var e = $('<div class="ajax-error"></div>').text(error.message);

                $form.after(e);

            }

        });

I noticed the part:

success: $.wpcf7AjaxSuccess,

Inside the $.wpcf7AjaxSuccess = function(data, status, xhr, $form) {... ...} part was these codes:

$(data.into).trigger('wpcf7:mailsent');

$(data.into).trigger('mailsent.wpcf7'); // deprecated

and

$(data.into).trigger('wpcf7:submit');

$(data.into).trigger('submit.wpcf7'); // deprecated