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

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

1 个答案: