如何还原默认事件侦听器以提交表单

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