取消訂閱按鈕后，表單的事件監聽器不起作用

我有一個小問題。Usign vanilla js 我為電子郵件輸入創建了一個表單，在將驗證函式發送到 localStorage 并更改按鈕的狀態之后；我做了一個取消訂閱電子郵件的事件監聽器，它從 localStorage 中洗掉了電子郵件，但在取消訂閱后我無法再次訂閱，我只能在重繪 頁面后才能再次訂閱。有關更多詳細資訊的一些螢屏截圖：我輸入了一個有效的電子郵件：

點擊訂閱：

點擊取消訂閱而不重繪 頁面：

在這種狀態下，我無法再次訂閱另一封電子郵件，它只能在重繪 后才能使用，但我需要在不重繪 的情況下執行此操作。我該怎么辦？創建此表單的部分是動態創建的。代碼： 訂閱功能：

import { validateEmail } from './email-validator.js'

export const subscribe = () => {
  const subscribeBtn = document.getElementById('subscribeButton')
  subscribeBtn.setAttribute('value', 'Unsubscribe')
  document.getElementById('emailForm').style.display = 'none'
  localStorage.setItem('isSubscribed', 'true')
}

export const unsubscribe = () => {
  const subscribeBtn = document.getElementById('subscribeButton')
  subscribeBtn.setAttribute('value', 'Subscribe')
  document.getElementById('emailForm').style.display = 'block'
  localStorage.setItem('isSubscribed', 'false')
}

export const subscribeEmail = (email) => {
  const isValidEmail = validateEmail(email)
  if (isValidEmail === true) {
    subscribe()
    document.querySelector('form').addEventListener('click', function (e) {
      e.preventDefault()
      unsubscribe()
      localStorage.removeItem('Email')
    })
  } else if (isValidEmail === false) {
    unsubscribe()
  }
}

驗證功能：

    const VALID_EMAIL_ENDINGS = ['gmail.com', 'outlook.com', 'yandex.ru']

export const validateEmail = (email) => VALID_EMAIL_ENDINGS.some(v => email.includes(v)) ? true : false

export { VALID_EMAIL_ENDINGS as validEnding }

和部分創建功能：

import { subscribe, unsubscribe, subscribeEmail } from './subscribe.js'

const addSection = () => {
  const sectionFour = createElement('sectionFour', 'section', 'app-section app-section--image-program', 'fourth-section')
  const sectionParent = getElbyID('sectionParent', 'third-section')
  const parentSection = sectionParent.parentNode
  parentSection.insertBefore(sectionFour, sectionParent.nextSibling)

  const heading2 = createElement('heading2', 'h2', 'program-title')
  const heading2Text = document.createTextNode('Join Our Program')
  heading2.append(heading2Text)
  const parent = getElbyID('parent', 'fourth-section')

  const heading3 = createElement('heading3', 'h3', 'program-subtitle')
  const heading3Text = document.createTextNode('Sed do eiusmod tempor incididunt')
  heading3.appendChild(heading3Text)
  const linebreak = createElement('linebreak', 'br')
  heading3.appendChild(linebreak)
  const textAfterBreak = document.createTextNode('ut labore et dolore magna aliqua')
  heading3.appendChild(textAfterBreak)

  const form = createElement('submitFieldWrapper', 'form', 'submitFieldWrapper', 'form')
  parent.append(heading2, heading3, form)

  const emailForm = createElement('emailForm', 'div', 'form-wrapper', 'emailForm')

  const inputForm = createElement('inputForm', 'input', 'form-input', 'submit-info')
  setAttributes(inputForm,
    'type', 'text',
    'placeholder', 'Email')
  if (localStorage.getItem('Email') !== null) {
    inputForm.setAttribute('value', localStorage.getItem('Email'))
  } else {
    inputForm.setAttribute('placeholder', 'Email')
  }

  emailForm.appendChild(inputForm)

  document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault()
    console.log(inputForm.value)
    localStorage.setItem('Email', inputForm.value)
    subscribeEmail(inputForm.value)
  })

  const submitForm = createElement('submitForm', 'input', 'app-section__button submit-btn', 'subscribeButton')
  setAttributes(submitForm,
    'type', 'submit',
    'value', 'Subscribe')
  form.append(emailForm, submitForm)

  const isSubscribed = localStorage.getItem('isSubscribed')
  if (isSubscribed === 'true') {
    subscribe()
  } else if (isSubscribed === 'false') {
    unsubscribe()
  }
}

const createElement = (elName, htmlEl, elClass, elID) => {
  const elementName = document.createElement(htmlEl)
  elementName.className = elClass
  elementName.id = elID

  return elementName
}

const getElbyID = (elName, searchedId) => {
  const elementToSearch = document.getElementById(searchedId)

  return elementToSearch
}

const setAttributes = (elem, ...elemArguments) => {
  for (let i = 0; i < elemArguments.length; i  = 2) {
    elem.setAttribute(elemArguments[i], elemArguments[i   1])
  }
}

export const advancedSection = () => {
  addSection()
  const getHeading = document.getElementById('fourth-section')
  const sectionChildren = getHeading.children
  sectionChildren[0].innerHTML = 'Join Our Advanced Program'
  const getButton = document.getElementById('subscribeButton')
  setAttributes(getButton,
    'type', 'submit',
    'value', 'Subscribe to Advanced Program')
  getButton.className = 'app-section__button submit-btnAdvanced'
}

export default addSection

我不明白我錯在哪里或缺少什么，請幫忙。提前致謝。

uj5u.com熱心網友回復：

當您單擊“取消訂閱”按鈕時，您還沒有為“訂閱”事件重新分配事件處理程式。

添加

  document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault()
    console.log(inputForm.value)
    localStorage.setItem('Email', inputForm.value)
    subscribeEmail(inputForm.value)
  })

到你的unsubcribe()函式結束。

uj5u.com熱心網友回復：

所以，問題出在 subscribeEmail 函式中，在 e.preventDefault()，idk 它是如何作業的，但我使用 stopPropagation 更改了 preventDefault，現在我可以根據需要訂閱和取消訂閱。代碼現在看起來像這樣：

    export const subscribeEmail = (email) => {
  const isValidEmail = validateEmail(email)
  if (isValidEmail === true) {
    subscribe()
    document.querySelector('form').addEventListener('click', function (e) {
      unsubscribe()
      localStorage.removeItem('Email')
      e.stopPropagation()
    })
  } else if (isValidEmail === false) {
    unsubscribe()
  }
}

標籤：javascript 形式 dom 事件监听器

上一篇：使用從網站/Javascript上的端點獲取資料來顯示資料

下一篇：eventListener在重繪JS之前多次觸發