对于 p 标签中的两个文本，我想要做的事情是，当单击其中一个文本时，它会移动一点，然后删除其他文本，但在再次单击第一个文本后重新添加。问题是，当标签被删除以及当它被添加回来时，mousedown 功能根本不起作用。我必须提到，鼠标按下在页面加载时第一次单击的文本/标签上可以正常工作，并且只有该标签保持可点击状态。
$(document).ready(function() {
var upPoBool = false;
//first part
$('#firstPart').mousedown(function() {
if(upPoBool == false){
var firstPart = document.getElementById("firstPart");
firstPart.classList.toggle("firstPartToggle");
//delete second part
$("#secondPart").remove();
upPoBool = true;
} else if(upPoBool == true){
var firstPart = document.getElementById("firstPart");
firstPart.classList.toggle("firstPartToggle");
$('#firstPart:last').after('<p id="secondPart">Second part move NEW</p>');
upPoBool = false;
}
});
var upBaBool = false;
//second part
$('#secondPart').mousedown(function() {
if(upBaBool == false){
var secondPart = document.getElementById("secondPart");
secondPart.classList.toggle("secondPartToggle");
//delete first part
$("#firstPart").remove();
upBaBool = true;
} else if(upBaBool == true){
var secondPart = document.getElementById("secondPart");
secondPart.classList.toggle("secondPartToggle");
$('#secondPart:last').before('<p id="firstPart">First part move NEW</p>');
upBaBool = false;
}
});
});.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>
<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>标签没有互相切入，所以 z-index 没有做任何事情，我也尝试将它们放在单独的 div 中，但结果是相同的。
如果从 DOM 中删除一个元素，您也会删除绑定的事件（也是 mousedown 事件）。这意味着您需要在重新创建元素后再次添加此 mousedown 事件。
另一种解决方案可能是隐藏元素而不是删除它们。这是一个例子：
$(document).ready(function() {
let activeItem = null
$('#testingDiv p').mousedown(function() {
if (!activeItem) {
$('#testingDiv p').not(this).hide()
$(this).addClass('active')
activeItem = $(this)
} else {
$('#testingDiv p').show()
$(this).removeClass('active')
activeItem = null
}
});
});.active {
margin-left: 5rem;
}
#firstPart {
position: absolute;
top: 2rem;
z-index: 101;
}
#secondPart {
position: absolute;
top: 4rem;
z-index: 100;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<title>ClickTestFAQ</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Something test:</p>
<div id="testingDiv">
<p id="firstPart">First part move</p>
<p id="secondPart">Second part move</p>
</div>
</body>
</html>