本文详解如何正确为多个按钮绑定独立事件，使其分别打开不同的表单弹窗，重点解决因选择器错误（如混淆 id 与 class）、遗漏事件监听、html 结构冗余导致的“第二个按钮无响应”问题。
本文详解如何正确为多个按钮绑定独立事件，使其分别打开不同的表单弹窗，重点解决因选择器错误（如混淆 id 与 class）、遗漏事件监听、html 结构冗余导致的“第二个按钮无响应”问题。
在实际开发中，常需通过多个触发按钮控制不同功能的模态表单（如「新增」与「删除」），但初学者易陷入两个典型陷阱：一是 DOM 元素选择器书写错误，二是未为所有目标按钮显式绑定事件监听器。从您提供的代码可见，第一个按钮（#button）能正常打开表单，而第二个按钮（#del）完全无响应——根本原因在于：
- ❌ 错误地用 document.querySelector(".del") 尝试获取 id="del" 的按钮（.del 是类名，但该按钮实际只有 class="del1"，且未定义 .del 类）；
- ❌ 即使正确获取了 #del 元素，也未为其添加 click 事件监听器，导致点击毫无反应；
- ⚠️ HTML 中存在两套重复的弹窗结构（.popup + .popup1），但 JavaScript 逻辑仅控制 .popup 和 .form，对 .popup1 和 .del 表单完全未作处理。
✅ 正确实现方案
首先，修正元素选择与事件绑定。您需要为 #del 按钮单独定义打开「删除表单」的逻辑，并确保其操作的是对应 DOM 节点：
// ✅ 正确选择 #del 按钮（使用 ID 选择器）
const delButton = document.querySelector('#del');
// ✅ 为删除按钮绑定点击事件
delButton.addEventListener('click', () => {
openDeleteForm(); // 新增专用函数
});
// ✅ 新增：打开删除表单的函数
const openDeleteForm = () => {
document.querySelector('.del').classList.add('open'); // 显示 .del 表单
document.querySelector('.popup1').classList.add('popup_open1'); // 显示 .popup1 背景层
};
// ✅ 同时补充关闭删除表单的逻辑（可复用 closeForm 或单独定义）
const closeDeleteForm = () => {
document.querySelector('.del').classList.remove('open');
document.querySelector('.popup1').classList.remove('popup_open1');
};
其次，精简并明确 HTML 结构语义。当前存在两套几乎相同的弹窗容器（.popup / .popup1、.popup__container / .popup__container1），易引发维护混乱。建议统一使用数据属性或语义化类名区分，例如：
<!-- 删除表单弹窗（复用同一套 popup 结构，仅切换内容） -->
<div class="popup" data-form-type="delete">
<div class="popup__container">
<div class="popup__wrapper">
<form method="POST" class="del">
<button type="button" class="exit" id="closeDeleteBtn">х</button>
<p>请输入要删除的记录编号：</p>
<div class="string">
<label for="del_id">ID:</label>
<input type="number" id="del_id" name="id_to_delete" required>
</div>
<button type="submit">确认删除</button>
</form>
</div>
</div>
</div>
最后，避免全局 ID 冲突。您当前在两个
