Форма перезагружает страницу во 2-й раз с protectDefault при использовании пользовательской функции DOM

Question

У меня есть форма входа в систему, и при отправке она вызывает эту функцию

login = (that) ->
  header =
    "X-CSRFToken": window.csrftoken

  $('body').toggleDOM('.loading', true)

  fermata.json("/login").post(header, that, (err, data) ->
    $('body').toggleDOM('.loading', false)

    if !data.success
      htAlert.error 'Incorrect username and/or password.'
  )

Это добавит «загрузочный счетчик» во время вызова API, а затем будет удален.Это отлично работает при первой отправке формы, потому что я использую preventDefault, поэтому страница не перезагружается.Однако со 2-й попытки страница перезагрузится, и я не знаю, почему она так себя ведет.

Моя функция DOM для добавления элемента в тело:

$.fn.toggleDOM = (domName, b) ->
  dom = domName[domName.search(/([\.\#])/)]
  newDom = domName.substring(1)

  if dom == '#'
    if b
      document.body.innerHTML += '<div id="' + newDom + '"></div>'
    else
      document.getElementById(newDom).remove()
  else
    if b
      document.body.innerHTML += '<div class="' + newDom + '"></div>'
    else
      document.getElementsByClassName(newDom)[0].remove()

событие для отправки формы:

$ ->
  trigger = document.querySelectorAll("[data-trigger]")

  trigger.forEach((i) ->
     i.addEventListener "submit", (e) ->
      e.preventDefault()
      # We have to pass the event instead of the element.
      switch i.attributes["data-trigger"].nodeValue
        when "[form/login]" then login(e)

HTML:

<form data-trigger="[form/login]" class="login">
  <input type="hidden" class="uuid hidden">
  <input placeholder="Username" class="username">
  <input placeholder="Password" type="password" class="password">
  <button type="submit">Login</button>
</form>

Мне нужно знать, почему он перезагружает страницу со 2-й попытки.Если я удалю $('body').toggleDOM('.loading', true), он не будет работать так, как задумано.

Кроме того, я не использую jQuery, я использую эту маленькую библиотеку: https://github.com/finom/balalaika

Answer 1

Проблема заключается в том, как вы присоединяете слушателей событий к вашим элементам.То, что вы пытаетесь сделать, не работает в простом JavaScript.

То, что вам нужно использовать, это делегирование событий;это не сильно изменит код, но изменит его работу.

Удалив цикл for и подключив обработчик к document, вы получите то, что вам нужно.

document.addEventListener "submit", (e) ->
  e.preventDefault();
  switch e.target.attributes["data-trigger"].nodeValue
    when "[form/login]" then login(e)

Есть отличная статья, в которой рассказывается, как и почему