JS动态追加标签后mousedown事件失效问题求助

问题 #

有两个带文本的<p>标签，需求如下：

• 点击其中一个标签时，让它小幅位移并删除另一个标签
• 再次点击该标签时，恢复其初始位置并重新添加被删除的标签

目前遇到的问题：被删除后重新追加的标签完全无法触发mousedown事件，只有页面加载完成后首次存在的标签能正常响应mousedown事件。

补充说明：标签之间不会互相遮挡，z-index无作用，尝试过放入独立div，问题仍存在。

问题原因 #

你当前的代码是直接给初始DOM元素绑定mousedown事件，这种绑定方式只会作用于页面加载时已经存在的元素。当你删除原标签后重新动态生成新的同名ID标签时，这些新元素并没有被绑定事件，所以无法触发mousedown。

解决方案 #

核心修改点 #

使用jQuery的事件委托（on()方法）替代直接绑定，将事件绑定到静态存在的父元素（比如#testingDiv）上，这样动态生成的元素也能触发事件。同时可以简化代码逻辑，统一操作方式。

修改后的完整代码 #

JavaScript

$(document).ready(function() {
    // 控制firstPart的状态
    let firstActive = false;
    // 控制secondPart的状态
    let secondActive = false;

    // 事件委托绑定firstPart的mousedown事件
    $('#testingDiv').on('mousedown', '#firstPart', function() {
        const $this = $(this);
        $this.toggleClass('firstPartToggle');
        
        if (!firstActive) {
            // 删除secondPart
            $('#secondPart').remove();
            firstActive = true;
        } else {
            // 重新添加secondPart
            $this.after('<p id="secondPart">Second part move NEW</p>');
            firstActive = false;
            // 重置secondPart的状态
            secondActive = false;
        }
    });

    // 事件委托绑定secondPart的mousedown事件
    $('#testingDiv').on('mousedown', '#secondPart', function() {
        const $this = $(this);
        $this.toggleClass('secondPartToggle');
        
        if (!secondActive) {
            // 删除firstPart
            $('#firstPart').remove();
            secondActive = true;
        } else {
            // 重新添加firstPart
            $this.before('<p id="firstPart">First part move NEW</p>');
            secondActive = false;
            // 重置firstPart的状态
            firstActive = false;
        }
    });
});

CSS（保留原代码）

.firstPartToggle{
    margin-left: 5rem;
}

.secondPartToggle{
    margin-left: 5rem;
}

#firstPart{
    position: absolute;
    top: 2rem;
    z-index: 101;
}

#secondPart{
    position: absolute;
    top: 4rem;
    z-index: 100;
}

HTML（保留原代码）

<html>
<head>
<meta charset="UTF-8">
<title>ClickTestFAQ</title>
<link rel="stylesheet" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
    <p>Something test:</p>
    <div id="testingDiv">
        <p id="firstPart">First part move</p>
        <p id="secondPart">Second part move</p>
    </div>
    
    <!--Scripts-->
    <script src="jquery.js"></script>
    
</body>
    
</html>

额外说明 #

1. 事件委托选择的父元素#testingDiv是页面加载时就存在的静态元素，比绑定到document更高效
2. 使用jQuery的toggleClass()替代原生的classList.toggle()，代码更简洁统一
3. 添加了状态重置逻辑，避免重新生成元素后状态混乱
4. 用$(this)缓存当前元素，减少DOM查询次数

内容的提问来源于stack exchange，提问作者Beansolder