Javascript 未到达事件处理程序

我无法使用projEdit类将事件侦听器添加到我的按钮图标。每当单击“编辑”按钮时，我都会显示一个新的“页面”，使用户能够将任务添加到项目中。问题是代码没有到达处理函数。该按钮在控制台中正确打印，因此我知道我的目标是正确的元素

HTML:

---

在您在评论中说事件侦听器只添加到最后一个元素的第二个元素之后，我假设您有多个编辑按钮，并且希望向所有这些按钮添加一个事件侦听器

您可以这样做：

function activateEditBtn() {
    document.querySelectorAll('#projectsDescription .projEdit').forEach(btn => {
        console.log(btn);
        btn.addEventListener('click', editTheProject);
    });
}

---

否则，您只能将侦听器添加到第一个侦听器。

是否有多个带有类

projEdit

（用于多个元素）的按钮<代码>查询选择器选择第一个元素。如果是这样，你可能从未测试过第一个按钮？@SvenEberth是的。我刚刚意识到事件侦听器正在添加到最后一个元素的第二个元素中，我如何修复它？但这不会是实时的…每次添加新项目时，我都必须循环查看整个列表。很抱歉回答得太晚。要将事件处理程序添加到所有按钮中，您需要提供有关代码的更多详细信息以及遇到的问题。我不知道您的全部代码，所以我不知道何时调用

saveProject

，或者何时添加新项目。

function getProjectHtml(title) {
    const str = `<h2><span>${title}</span>
    <button class="projEdit"><span> <i class="fas fa-edit"></i></span></button>
    <button class="projDel"><span><i class="fas fa-trash-alt"></i></span></button></h2>`
    return str;
}
export default function displayProject(docRef) {
    docRef.onSnapshot((snapshot) => {
        snapshot.docChanges().forEach((change) => {
            if (change.type == "added") {
                const projectsDescription = document.getElementById('projectsDescription');
                let project = document.createElement('div');
                project.innerHTML = getProjectHtml(change.doc.data().title);
                projectsDescription.appendChild(project);
            }
        })
    });
}

function editTheProject() {
    console.log('hi'); // NOT REACHED 
}

function activateEditBtn() {
    const btn = document.querySelector('#projectsDescription > *:last-child .projEdit');
    console.log(btn); // This Is Fine!
    btn.addEventListener('click', editTheProject);
}

function saveProjectFunctionality() {
    // Step 1 - add project to DB
    const project = getProject();
    addProjectToDB(project);
    // Step 2 - Close the Modal  -  LEFT

    // Step 3 - Add event listener to the Edit button 
    activateEditBtn();

}

export default function saveProject() {
    const saveProjectBtn = document.getElementById('saveProjectBtn');
    saveProjectBtn.addEventListener('click', saveProjectFunctionality);
}

function activateEditBtn() {
    document.querySelectorAll('#projectsDescription .projEdit').forEach(btn => {
        console.log(btn);
        btn.addEventListener('click', editTheProject);
    });
}