好的，所以我做了一个模态，我插入选项来改变卡片属性，如名称，描述和公司。它实际上工作得相当好，除了当我打开另一个模态而不刷新页面它加倍(然后三倍等)它发送的请求的数量。我不知道为什么。我要把我屏幕上的视频链接起来，这样我就能更清楚地表达我的意思了。
https://www.veed.io/view/17448fc2 - 7068 - 4419 - 87 - a2 - 395 c528bbffa?sharingwidget=true&面板=分享
我认为这部分代码很重要
function getAllDepartmentHandleButton() {
const allDeleteButtons = document.querySelectorAll('.departmentContainer__content--card')
allDeleteButtons.forEach(e => {
e.addEventListener('click', (event) => {
//console.log(event)
if(event.target.classList.value == 'remove') {
showRemoveDepartmentModal(event.target.id, event.target.alt)
} else if(event.target.classList.value == 'edit') {
showEditDepartmentModal(event.target.id)
}
})
})
}
async function showEditDepartmentModal(departmentId) {
let companyToEditid = 0
const allDepartments = await getAllDepartments()
const editModal = document.querySelector('.editDepartmentModal')
const closeBtn = document.querySelector('.editDepartmentModal__container > img')
const nameInput = document.querySelector('.editDepartmentModal__container--departmentName')
const descriptionInput = document.querySelector('.editDepartmentModal__container--departmentDescription')
const selectedCompanyInput = document.querySelector('.editDepartmentModal__container--company > span')
const placeToAppend = document.querySelector('.editDepartmentModal__container--list')
const showCompanyOptionsButton = document.querySelector('.editDepartmentModal__container--company')
const dialogCompanyOptions = document.querySelector('.editDepartmentModal__container > dialog')
const allCompanies = await getAllCompanies()
const buttonSaveAlterations = document.querySelector('.editDepartmentModal__container--button')
allCompanies.forEach(e => {
placeToAppend.insertAdjacentHTML('beforeend', `
<li id="${e.uuid}">${e.name}</li>
`)
})
editModal.showModal()
const selectedCompany = allDepartments.find(e => {
if (e.uuid == departmentId) {
return e
}
})
closeBtn.addEventListener('click', () => {
editModal.close()
})
nameInput.value = selectedCompany.name
descriptionInput.value = selectedCompany.description
selectedCompanyInput.innerText = selectedCompany.companies.name
selectedCompanyInput.id = departmentId
showCompanyOptionsButton.addEventListener('click', ()=> {
if(dialogCompanyOptions.open) {
dialogCompanyOptions.close()
} else {
dialogCompanyOptions.show()
}
})
placeToAppend.addEventListener('click', (event) => {
companyToEditid = event.target.id
selectedCompanyInput.innerText = event.target.innerText
dialogCompanyOptions.close()
})
buttonSaveAlterations.addEventListener('click', () => {
if(nameInput.value == '' || descriptionInput.value == '') {
alert('vazio')
} else {
editDepartmentFunction(nameInput.value, descriptionInput.value, companyToEditid)
editModal.close()
}
})
}
function editDepartmentFunction(test1, test2, test3) {
console.log(test1, test2,test3)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../styles/globalStyles.css">
<link rel="stylesheet" href="../styles/indexStyles.css">
<link rel="stylesheet" href="../styles/AdminPageStyling copy.css">
<link rel="stylesheet" href="../styles/adminPagesModal.css">
</head>
<body>
<header>
<div class="titleAndMenuIcon">
<span><span class="titleAndMenuIcon__bulelt">• </span>Kenzie Empresas</span>
<button>Logout</button>
</div>
</header>
<main>
<div class="departmentContainer">
<div class="departmentContainer__header">
<span class="departmentContainer__header--title">Departamentos</span>
<div class="departmentContainer__header--companiesSelect">
<span class="">Selecionar Empresa</span>
<img src="../files/down-arrow-svgrepo-com.svg" alt="">
</div>
<dialog class="departmentContainer__header--companiesModal">
<ul>
</ul>
</dialog>
<div class="departmentContainer__header--create"><img src="../files/plusIcon.svg" alt=""><span>Criar</span></div>
</div>
<div class="departmentContainer__content">
</div>
</div>
<div class="userContainer">
<div class="userContainer__header">
<span class="userContainer__header--title">Usuários Cadastrados</span>
</div>
<div class="userContainer__content">
</div>
</div>
</main>
<dialog class="createDepartmentModal">
<div class="createDepartmentModal__container">
<img src="../files/closebtnsvg.svg" alt="">
<span class="createDepartmentModal__container--title">Criar Departemento</span>
<input type="text" class="createDepartmentModal__container--departmentName" placeholder="Nome do Departamento">
<input type="text" class="createDepartmentModal__container--departmentDescription" placeholder="Descrição">
<div class="createDepartmentModal__container--company">
<span>Selecionar Empresa</span>
<img src="../files/down-arrow-svgrepo-com.svg" alt="">
</div>
<dialog class="createDepartmentModal__container--company__modal">
<ul class="createDepartmentModal__container--company__modal--container">
</ul>
</dialog>
<span class="createDepartmentModal__container--button">Criar Departamento</span>
</div>
</dialog>
<dialog class="removeDepartmentModal">
<div class="removeDepartmentModal__container">
<span>mensagem aqui</span>
<div>Continuar</div>
<img src="../files/closebtnsvg.svg" alt="">
</div>
</dialog>
<dialog class="editDepartmentModal">
<div class="editDepartmentModal__container">
<dialog><ul class="editDepartmentModal__container--list"></ul></dialog>
<img src="../files/closebtnsvg.svg" alt="">
<span class="editDepartmentModal__container--title">Editar Departamento</span>
<input type="text" class="editDepartmentModal__container--departmentName" placeholder="Novo Nome do Departamento">
<input type="text" class="editDepartmentModal__container--departmentDescription" placeholder="Nova Descrição">
<div class="editDepartmentModal__container--company">
<span>Selecionar Empresa</span>
<img src="../files/down-arrow-svgrepo-com.svg" alt="">
</div>
<dialog class="editDepartmentModal__container--company__modal">
<ul class="editDepartmentModal__container--company__modal--container">
</ul>
</dialog>
<span class="editDepartmentModal__container--button">Salvar Alterações</span>
</div>
</dialog>
</body>
<script src="../scripts/AdminPageScript.js"></script>
</html>
我几乎尝试了所有方法，但唯一能让它停止的是刷新页面。当然，这不是一个合适的替代
您将在用于显示模态的相同函数(showEditDepartmentModal)中添加事件侦听器。
你有两个选择。第一，在模态关闭时清除事件侦听器。第二，在showEditDepartmentModal之外添加事件侦听器。
我选第二个。你的showEditDepartmentModal太大了。试着把它分成更小的部分。它的名字是showeditdepartmentmodal。但它的作用不止于此——这不是一个好主意。
您很可能添加了n次事件侦听器，而不仅仅是一次。
选项1(更好):
确保addEventListener只被调用一次，在document ready或类似的地方
选项2(更糟的是，如果你不能使用选项1，使用它):
改变:
allDeleteButtons.forEach(e => {
e.addEventListener('click', (event) => {
//console.log(event)
if(event.target.classList.value == 'remove') {
showRemoveDepartmentModal(event.target.id, event.target.alt)
} else if(event.target.classList.value == 'edit') {
showEditDepartmentModal(event.target.id)
}
})
})
和下面的内容类似:
function clickFunction(event) {
//console.log(event)
if(event.target.classList.value == 'remove') {
showRemoveDepartmentModal(event.target.id, event.target.alt)
} else if(event.target.classList.value == 'edit') {
showEditDepartmentModal(event.target.id)
}
}
allDeleteButtons.forEach(e => {
e.removeEventListener('click', clickFunction);
e.addEventListener('click', clickFunction);
})