时间戳

首页 > 解决方案 > 事件监听器不工作但没有错误

javascript - 事件监听器不工作但没有错误

问题描述

我有一个事件监听器正在监听表单的提交，该表单将被发送到 firebase auth。几个小时前，它工作正常。但突然间，它就停止了。没有错误什么都没有。没有事件监听器在工作。我重新启动了 vs code 和我的电脑。定义事件侦听器的位置 -

import { smoothScroll } from './animations.js';
import { signup, logout } from './auth.js';

smoothScroll();

// Elements
const signupForm = document.querySelector('#signup-form');
const logoutBtn = document.querySelector('#logout-btn');

console.log(signupForm);

signupForm.addEventListener('submit', signup);
logoutBtn.addEventListener('click', logout);

实际功能 -

export function signup(e) {
    e.preventDefault();

    console.log('Sugb');

    // User info
    const email = signupForm['email'].value;
    const password = signupForm['password'].value;

    // Sign up
    auth
        .createUserWithEmailAndPassword(email, password)
        .then((cred) => {
            document.querySelector('.alert').classList.add('alert--show');

            document.querySelector('.alert').textContent = 'User signed up';

            loginState = true;

            signupForm.reset();
        })
        .catch((error) => {
            document
                .querySelector('.alert')
                .classList.remove('alert-success')
                .add('alert-danger')
                .add('alert--show');

            document.querySelector('.alert').textContent = error.message;
        });
}

export function logout(e) {
    console.log('Logout');
    alert('Logout');
}

通过一些调试，我发现我的函数没有被调用。这是 github 存储库https://github.com/akashshyamdev/doubt1，以防您需要更多信息。提前致谢。

标签： javascripthtml

解决方案

由于存在注册表单，当您添加事件侦听器但未调用事件回调函数时，我假设您在添加事件侦听器后更改了表单。

为此，您必须将事件委托给始终存在的元素，通常是document. 正如 MDN 文档所说的那样，它冒泡了submit_event，我们可以这样做

代替 signupForm.addEventListener('submit', signup);

做这个

document.addEventListener('submit', function(e) {
  if (e.target.closest('#signup-form')) {
    return signup(e);
  }
  return false;
});

推荐阅读