当使用 remove() 删除 DOM 元素后重新插入同 ID 元素时，原绑定的 mousedown 事件会丢失；必须为新元素重新绑定事件，或改用事件委托/显式隐藏替代删除操作。
当使用 `remove()` 删除 dom 元素后重新插入同 id 元素时，原绑定的 `mousedown` 事件会丢失；必须为新元素重新绑定事件，或改用事件委托/显式隐藏替代删除操作。
在 jQuery 中，通过 .mousedown() 等方法直接绑定事件时，事件监听器是静态附加在当前匹配的 DOM 节点上的。一旦该节点被 remove() 或 html() 等操作从文档中移除，其所有绑定事件（包括 mousedown）将一并销毁——即使后续用相同 HTML 字符串重新插入一个结构完全一致的新元素，它也是全新的 DOM 对象，不继承任何原有事件。
✅ 正确方案一：动态重建后手动重绑事件
如问题答案所示，最直观的修复方式是在每次动态创建新元素后，立即为其重新绑定事件处理器：
$(document).ready(function() {
let upPoBool = false;
let upBaBool = false;
const firstPartHandler = function() {
if (!upPoBool) {
$("#firstPart").toggleClass("firstPartToggle");
$("#secondPart").remove();
upPoBool = true;
} else {
$("#firstPart").toggleClass("firstPartToggle");
$('#firstPart').after('<p id="secondPart">Second part move NEW</p>');
// ? 关键：为新生成的 #secondPart 重新绑定事件
$('#secondPart').mousedown(secondPartHandler);
upPoBool = false;
}
};
const secondPartHandler = function() {
if (!upBaBool) {
$("#secondPart").toggleClass("secondPartToggle");
$("#firstPart").remove();
upBaBool = true;
} else {
$("#secondPart").toggleClass("secondPartToggle");
$('#secondPart').before('<p id="firstPart">First part move NEW</p>');
// ? 关键：为新生成的 #firstPart 重新绑定事件
$('#firstPart').mousedown(firstPartHandler);
upBaBool = false;
}
};
// 初始绑定（页面加载时存在的元素）
$('#firstPart').mousedown(firstPartHandler);
$('#secondPart').mousedown(secondPartHandler);
});⚠️ 注意事项：
- 避免重复绑定（如多次执行 $('#secondPart').mousedown(...)），否则会导致同一事件触发多次。建议使用函数引用（而非匿名函数）并确保只绑定一次；
- 若存在多个同类动态元素，推荐统一管理事件逻辑，避免硬编码 ID 绑定。
✅ 正确方案二：使用事件委托（推荐）
更优雅、可扩展性更强的方式是利用 事件委托（Event Delegation），将事件监听器绑定在父容器（如 #testingDiv）上，并利用事件冒泡机制捕获子元素触发的 mousedown：
$(document).ready(function() {
let activeItem = null;
$('#testingDiv').on('mousedown', 'p', function() {
const $this = $(this);
if (!activeItem) {
// 第一次点击：隐藏其他兄弟元素，激活当前项
$('#testingDiv p').not(this).hide();
$this.addClass('active');
activeItem = $this;
} else {
// 再次点击：恢复全部显示，取消激活
$('#testingDiv p').show();
$this.removeClass('active');
activeItem = null;
}
});
});配合 CSS：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
.active {
margin-left: 5rem;
}
#firstPart, #secondPart {
position: absolute;
z-index: 101;
}
#firstPart { top: 2rem; }
#secondPart { top: 4rem; }✅ 优势：
- 无需关心元素是否动态增删，只要父容器存在且选择器匹配，事件始终有效；
- 代码简洁，无重复绑定风险；
- 天然支持未来新增的
元素（例如通过 JS 插入第 N 个部分）。
✅ 替代思路：用 hide() / show() 替代 remove() / append()
若业务逻辑允许，隐藏（hide()）比删除（remove()）更安全：
- 元素保留在 DOM 中，事件绑定持续有效；
- 性能更好（避免频繁重排重绘）；
- 状态（如表单值、滚动位置、动画状态）更容易保持。
// 示例：仅切换可见性，不破坏事件绑定
$('#firstPart').mousedown(function() {
$(this).toggleClass('firstPartToggle');
$('#secondPart').toggle(); // 显示/隐藏，非删除
});✅ 总结
| 方案 | 是否需重绑事件 | 可维护性 | 推荐场景 |
|---|---|---|---|
| 手动重绑（答案方案一） | ✅ 必须 | 中等 | 小型固定数量元素，逻辑简单 |
| 事件委托（.on()） | ❌ 无需 | ⭐ 高 | 推荐首选，尤其含动态内容或未来扩展需求 |
| hide()/show() 替代删除 | ❌ 无需 | ⭐ 高 | 无需彻底移除 DOM，侧重 UI 切换 |
牢记核心原则：DOM 节点销毁 → 事件消失；事件委托 → 一劳永逸；合理隐藏 → 简洁高效。
