如何還原默認事件偵聽器以提交表單

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