jQuery 动态添加元素后 mousedown 事件失效的解决方案-html教程-PHP中文网

jQuery 动态添加元素后 mousedown 事件失效的解决方案

动态删除并重新插入 dom 元素时，原绑定的事件监听器会丢失，导致新元素无法响应 mousedown；需在重建元素后重新绑定事件，或改用事件委托/显式显示隐藏策略避免 dom 移除。

动态删除并重新插入 dom 元素时，原绑定的事件监听器会丢失，导致新元素无法响应 mousedown；需在重建元素后重新绑定事件，或改用事件委托/显式显示隐藏策略避免 dom 移除。

在 jQuery 中，使用 .remove() 方法删除元素不仅会从 DOM 中移除该节点，还会彻底销毁其所有绑定的事件处理器和数据。因此，当您通过 $('#secondPart').remove() 删除元素，再用 $('#firstPart:last').after('

...

') 重新插入同 ID 的

标签时，这个“新”元素是一个完全独立的 DOM 节点——它没有继承任何原有事件绑定，mousedown 自然不再生效。

✅ 正确做法一：重建后立即重绑事件（函数复用）

将事件处理逻辑封装为命名函数，并在每次动态创建元素后显式调用 .mousedown() 绑定：

$(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:last').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:last').before('<p id="firstPart">First part move NEW</p>');
            // ? 关键：为新生成的 #firstPart 重新绑定事件
            $('#firstPart').mousedown(firstPartHandler);
            upBaBool = false;
        }
    };

    // 初始绑定（页面加载时存在）
    $('#firstPart').mousedown(firstPartHandler);
    $('#secondPart').mousedown(secondPartHandler);
});

⚠️ 注意事项：

避免重复绑定（如多次执行 $('#firstPart').mousedown(...)），否则会导致同一事件触发多次；建议确保每次仅对当前存在的唯一目标元素调用绑定。

使用 let 替代 var 声明布尔状态变量，提升作用域安全性与可维护性。

✅ 更优方案二：使用事件委托（推荐）

无需手动管理绑定/解绑，利用事件冒泡机制，将监听器统一委托给父容器（如 #testingDiv）：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

$(document).ready(function() {
    let activeItem = null;

    $('#testingDiv').on('mousedown', 'p[id^="firstPart"], p[id^="secondPart"]', function() {
        const $this = $(this);
        const id = $this.attr('id');

        if (!activeItem) {
            // 隐藏另一个元素，激活当前
            $('#testingDiv p').not(this).hide();
            $this.addClass('active');
            activeItem = $this;
        } else {
            // 恢复全部可见，取消激活
            $('#testingDiv p').show();
            $this.removeClass('active');
            activeItem = null;
        }
    });
});

对应 CSS 可简化为：

.active { margin-left: 5rem; }
#firstPart, #secondPart {
    position: absolute;
    z-index: 101;
}
#firstPart { top: 2rem; }
#secondPart { top: 4rem; }

✅ 优势显著：

一次绑定，永久有效，无论子元素如何增删；
代码更简洁、健壮，无状态同步风险；
符合现代前端最佳实践（ delegation over direct binding）。

✅ 替代思路：仅隐藏而非删除（轻量级）

若业务允许，直接 hide() / show() 是最安全、性能最优的方式，完全规避事件丢失问题：

$('#firstPart').mousedown(function() {
    $(this).toggleClass('firstPartToggle');
    $('#secondPart').toggle(); // 显示/隐藏切换
});
$('#secondPart').mousedown(function() {
    $(this).toggleClass('secondPartToggle');
    $('#firstPart').toggle();
});

总结

方案	是否需重绑	是否推荐	适用场景
手动重绑事件	✅ 必须	⚠️ 中等	需精确控制 DOM 结构且元素生命周期明确
事件委托（.on()）	❌ 自动代理	✅ 强烈推荐	动态内容频繁更新、组件化开发
show()/hide() 替代 remove()	❌ 无需绑定	✅ 推荐	UI 展开/收起类交互，无需真实销毁节点

牢记：DOM 移除 = 事件销毁。拥抱事件委托，是解决此类问题最优雅、可持续的工程方案。