如何恢复默认事件侦听器以提交表单

Question

我有一个订单表格，用户可以在其中更改他们的卡信息，然后再提交表格。

如果他们想使用一张新卡，他们可以点击一个按钮将条纹支付元素安装到表单上，然后他们可以输入他们的新卡信息。

表单提交有一个async event.preventDefault();，以便从条带中获取令牌，以便可以在提交表单之前生成它并附加到隐藏字段，以便令牌可以与条带gem一起使用以向用户收费控制器。

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