Javascript JS每次提交表单时都会重复输入

当我添加一个新名称时，它会工作，但当我再次添加一个名称时，它会添加两次，以此类推。。。。这似乎是由弹出窗口引起的，但我不明白为什么

let table=document.getElementById（'table'））
let popup=document.querySelector（“.popup”）
让我们添加_new_form=document.querySelector（“#form new”）
让add_btn=document.querySelector（'.add'）
add_btn.addEventListener（'click'，add_new）
函数add_new（）{
popup.classList.remove（'hidden'）
添加新表单.classList.remove（'hidden'）
添加新表单。添加事件列表器（'submit'，函数（e）{
e、 预防默认值（）
让new_name=add_new_form.querySelector（“#name new input”）.value
table.innerHTML+=`${new_name}
`
popup.classList.add（'hidden'）
})
}

.hidden{display:none}
.弹出窗口{
宽度：100%；
身高：100%；
位置：绝对位置；
背景：#000c；
排名：0；
左：0；
}
.弹出框{
背景：白色；
填充：20px；
最大宽度：600px；
最高：50%；
位置：绝对位置；
左：50%；
转换：翻译（-50%，-50%）；
}

添加

每次运行

add\u new

功能时，都会将新事件侦听器绑定到

add\u new\u表单

将事件侦听器绑定到函数外部，并在

add\u new

函数中触发submit事件

let table=document.getElementById（'table'））
let popup=document.querySelector（“.popup”）
让我们添加_new_form=document.querySelector（“#form new”）
让add_btn=document.querySelector（'.add'）
add_btn.addEventListener（'click'，函数add_new（）{
popup.classList.remove（'hidden'）
添加新表单.classList.remove（'hidden'）
//触发提交事件
添加新表格。提交；
})
添加新表单。添加事件列表器（'submit'，函数（e）{
e、 预防默认值（）
让new_name=add_new_form.querySelector（“#name new input”）.value
table.innerHTML+=`${new_name}
`
popup.classList.add（'hidden'）
})

。隐藏{
显示：无
}
.弹出窗口{
宽度：100%；
身高：100%；
位置：绝对位置；
背景：#000c；
排名：0；
左：0；
}
.弹出框{
背景：白色；
填充：20px；
最大宽度：600px；
最高：50%；
位置：绝对位置；
左：50%；
转换：翻译（-50%，-50%）；
}

添加

每次调用add_new函数时，都会绑定一个新的“submit”addEventListener。将该侦听器移到函数外部。您也不应该在此处使用

表单

、

提交

事件或

e.preventDefault（）

，因为您实际上并没有在任何地方提交数据。常规按钮和它们的

单击事件就是您所需要的。如果您多次按下顶部的“添加”按钮，您将在该链接上看到相同的行为