联系表7自定义DOM事件使用冒号命名间隔$(data.into).trigger('wpcf7:mailsent')。 DOM事件名称如何变为“ wpcf7mailsent”?

时间:2018-11-15 17:38:57

标签: javascript jquery ajax dom contact-form-7

我的问题

如果jQuery自定义事件使用'wpcf7:mailsent''wpcf7:submit'之类的冒号命名,那么DOM事件名称为何或如何变为wpcf7mailsentwpcf7submit?他们通过某种DOM流程加入了吗?


更多上下文

Wordpress的联系表7提供了几种类型的custom DOM events。当我查看插件的源代码时,我试图了解这些名称是如何在DOM中创建的以及它们的来源。

联系表7自定义DOM事件列表

  • wpcf7invalid -在Ajax表单提交成功完成但由于字段输入无效而未发送邮件时触发。
  • wpcf7spam -在Ajax表单提交成功完成但由于检测到可能的垃圾邮件活动而未发送邮件时触发。
  • wpcf7mailsent -在Ajax表单提交成功完成并且已发送邮件时触发。
  • wpcf7mailfailed -当Ajax表单提交成功完成但发送邮件失败时触发。
  • wpcf7submit -在Ajax表单提交成功完成时触发,无论其他事件如何。

来源:wp-plugins/contact-form-7 Github repo

处理表单数据的代码(我认为):

$.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);
            }
        });

我注意到了这一部分:

success: $.wpcf7AjaxSuccess,

$.wpcf7AjaxSuccess = function(data, status, xhr, $form) {... ...}部分的内部是这些代码:

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

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

0 个答案:

没有答案