Как восстановить прослушиватель событий по умолчанию для отправки формы

Question

У меня есть форма заказа, в которой пользователь может изменить данные своей карты на месте перед отправкой формы.

Если они хотят использовать новую карту, они могут нажать кнопку, чтобы смонтировать элемент оплаты в виде полосыформа и они могут ввести информацию о своей новой карте.

Форма отправки имеет async event.preventDefault(); для получения токена с полосы, чтобы его можно было сгенерировать и добавить в скрытые поля перед отправкой формы, чтобытокен может использоваться с жемчужиной полосы для зарядки пользователя в контроллере.

  changeCardButton.addEventListener('click', e => {
    e.preventDefault();
    mountCardField();
  });

  function mountCardField() {
  form.addEventListener('submit', async event => {
    event.preventDefault();
    const { token, error } = await stripe.createToken(card);
    if (error) {
    } else {
      stripeTokenHandler(token);
      form.submit();
    }
  });
}

В случае, если пользователь передумает и захочет вернуться к информации о сохраненной карточке, он может нажать кнопку назадКнопка перед отправкой формы заказа:

  cardContainerBackButton.addEventListener('click', e => {
    e.preventDefault();
    unmountCardFieldAndShowLastUsedCard();
  });

  function unmountCardFieldAndShowLastUsedCard() {
    card.unmount();
    form.removeEventListener('submit', event, false);
    changeCardContainer.style.display = 'none';
    cardInfo.style.display = 'block';
  }

Однако form.removeEventListener('submit', event); не работает для восстановления поведения форм по умолчанию и отправки, как это было бы без генерации токена чередования.

Uncaught (in promise) IntegrationError: We could not retrieve data from the specified Element.
              Please make sure the Element you are attempting to use is still mounted.

Как удалить из формы прослушиватель отправки асинхронных событий и восстановить поведение отправки форм по умолчанию?

Answer 1

Я думаю, что проблема в вашем removeEventListener звонке.Второй аргумент должен быть исходным слушателем, которого вы хотите удалить, и в данный момент вы передаете event, который кажется неопределенным.

Чтобы исправить это, определите слушателя как его собственную функцию и используйтеэто и в add и remove:

const listener = async event => {
  event.preventDefault();
  const { token, error } = await stripe.createToken(card);
  if (error) {
  } else {
    stripeTokenHandler(token);
    form.submit();
  }
}

function mountCardField() {
  form.addEventListener('submit', listener);
}

function unmountCardFieldAndShowLastUsedCard() {
  // ...
  form.removeEventListener('submit', listener);
}