Javascript 使用FlightJS的事件流不正确

我试图找出一个问题，即在触发事件之前，特定的div会出现，这是由FlightJs函数指定的

define([
  'flight',
  'mixins/form'
], function(flight, formMixin) {

  function forgotPasswordForm() {
    this.attributes({
      submitButtonSelector: '.btn-submit',
      formSelector: '#forgot-password',
      successMessageSelector: '.success-message',
      successMessageEmailSelector: '.success-message span.success-email',
      emailInputSelector: '#forgot-password #email',
      errorSelector: '#forgot-password .error-message'
    });

    this.after('initialize', function() {
      this.on('click', {
        'submitButtonSelector': this.onSubmitButtonClicked
      });
      this.on('keyup keypress', {
        'formSelector': this.onFormKeyUp
      });
    });

    this.onFormKeyUp = function(event) {
      // Capture and deal with "Enter" key being pressed.
      var keyCode = event.keyCode || event.which;
      if (keyCode == 13) {
        event.preventDefault();
        this.onSubmitButtonClicked();
        return false;
      }
    };

    this.onSubmitButtonClicked = function(event) {
      var email = this.select('emailInputSelector').val();
      if (email.length > 0) {
        this.select('errorSelector').hide();
        this.postForm(this.select('formSelector'))
        // Show success message on error to hide malicious password resetting.
            .error(this.showSuccessMessage(email))
            .done(this.showSuccessMessage(email));
      } else {
        this.select('errorSelector').show();
      }
    };

    this.showSuccessMessage = function(email) {
      this.select('successMessageSelector').show();
      this.select('successMessageEmailSelector').text(email);
    };
  }

  flight.component(forgotPasswordForm, formMixin).attachTo('.forgot-password-form');
});

如您所见，在检测到初始化之后，我为onSubmitButtonClicked指定了on click事件

在onSubmitButtonClicked函数中，我收集字段值并将其传递给在mixin“form”中指定的请求处理程序，如下所示：

define([], function() {
  'use strict';

  function formMixin() {
    /*
     *   Use an existing form to post data asynchronously, in order to avoid
     * hard coding URLs and data transformation on Javascript.
     */
    this.postForm = function($form) {
      return $.ajax({
        type: $form.attr('method'),
        url: $form.attr('action'),
        data: $form.serialize()
      });
    };
  }

  return formMixin;
});

<div class="forgot-password-form">
  <form id="forgot-password" method="GET" 
  action="https://jsonplaceholder.typicode.com/comments">
    <input id="email"> 
    <div class="error-message">
      Error!
    </div>
  </form>
  <button class="btn-submit">
    Submit
  </button>

  <div class="success-message">
    Success!
  </div>
</div>

// ...
this.after('initialize', function() {
  this.on('click', {
    'submitButtonSelector': this.onSubmitButtonClicked
  });
  this.on('keyup keypress', {
    'formSelector': this.onFormKeyUp
  });
  this.select('successMessageSelector').hide();
  this.select('errorSelector').hide();
});
// ...

---

问题是showSuccessMessage函数是在初始化之后立即启动的，而不是在等待SubmitButtonClick之后。错误和已完成回调的链接是否不正确，或者代码是否存在其他错误？

假设您在某处有一个可用的require.js/webpack配置，您没有使用任何CSS类来隐藏消息元素，并且您的标记如下所示：

define([], function() {
  'use strict';

  function formMixin() {
    /*
     *   Use an existing form to post data asynchronously, in order to avoid
     * hard coding URLs and data transformation on Javascript.
     */
    this.postForm = function($form) {
      return $.ajax({
        type: $form.attr('method'),
        url: $form.attr('action'),
        data: $form.serialize()
      });
    };
  }

  return formMixin;
});

<div class="forgot-password-form">
  <form id="forgot-password" method="GET" 
  action="https://jsonplaceholder.typicode.com/comments">
    <input id="email"> 
    <div class="error-message">
      Error!
    </div>
  </form>
  <button class="btn-submit">
    Submit
  </button>

  <div class="success-message">
    Success!
  </div>
</div>

// ...
this.after('initialize', function() {
  this.on('click', {
    'submitButtonSelector': this.onSubmitButtonClicked
  });
  this.on('keyup keypress', {
    'formSelector': this.onFormKeyUp
  });
  this.select('successMessageSelector').hide();
  this.select('errorSelector').hide();
});
// ...

我做了一个你可以看的地方