如何使用jQuery访问已“移动”的DOM元素?绕着这一页

How can I access a DOM element with jQuery that I have "moved" around the page?

本文关键字：元素 DOM 一页 jQuery 何使用 访问 移动      更新时间：2023-09-26

我有一个有两个区域的页面。每个区域都有盒子。如果用户单击顶部区域的一个框，它将被移动到底部，反之亦然。这对第一乐章来说很好。从理论上讲，我应该能够在各个部分之间随意移动它们。

HTML框: 

<div id="top-area">
    <div class="top-box" id="blue-box"></div>
    <div class="top-box" id="yellow-box"></div>
    <div class="top-box" id="green-box"></div>
</div>
<hr/>
<div id="bottom-area">
    <div class="bottom-box" id="red-box"></div>
    <div class="bottom-box" id="gray-box"></div>
</div>

我使用jQuery.remove()将其从顶部部分取出，jQuery.append()将其添加到另一个部分。但是，当我试图将一个盒子移回其原始位置时，我创建的用于移动它们的事件甚至不会触发。

jQuery/JavaScript: 

$(".top-box").on('click', function ()
{
    var item = $(this);
    item.remove();    
    $(this).removeClass("top-box").addClass("bottom-box");    
    $("#bottom-area").append(item);
});
$(".bottom-box").on('click', function ()
{
    var item = $(this);
    item.remove();    
    $(this).removeClass("bottom-box").addClass("top-box");    
    $("#top-area").append(item);
});

我已经验证了我使用的jQuery选择器类被正确添加/删除。我甚至使用$(document).on()来处理我的事件。为什么我的盒子没有触发jQuery事件后，他们被移动一次?

请参阅小提琴: http://jsfiddle.net/r6tw9sgL/

您的代码将页面加载上的事件附加到与选择器匹配的元素上，然后是。

如果将侦听器附加到#top-area和#bottom-area，然后使用委托事件将单击事件限制到框上，它应该像您期望的那样工作。参见.on: Direct and Delegated Events了解更多信息。

使用下面的JavaScript:

$("#top-area").on('click', '.top-box', function ()
{
    var item = $(this);
    item.remove();
    $(this).removeClass("top-box").addClass("bottom-box");
    $("#bottom-area").append(item);
});
$("#bottom-area").on('click', '.bottom-box', function ()
{
    var item = $(this);
    item.remove();
    $(this).removeClass("bottom-box").addClass("top-box");
    $("#top-area").append(item);
});

另外:

您还可以将.on()更改为.live()，这适用于"现在和将来匹配当前选择器的所有元素"。(JSFiddle)

JSFiddle

还有另一种方法:

function toBottom ()
{
    var item = $(this);
    item.remove();
    item.off('click', toBottom);
    item.on('click', toTop);
    $(this).removeClass("top-box").addClass("bottom-box");
    $("#bottom-area").append(item);
}
function toTop ()
{
    var item = $(this);
    item.remove();
    item.off('click', toTop);
    item.on('click', toBottom);
    $(this).removeClass("bottom-box").addClass("top-box");
    $("#top-area").append(item);
}
$(".top-box").on('click', toBottom);
$(".bottom-box").on('click', toTop);
#top-area, #bottom-area {
    height: 100px;
    border: 1px solid black;
    padding: 10px;
}
.top-box::before {
    content: "Top";
}
.bottom-box::before {
    content: "Bottom";
}
#blue-box, #red-box, #yellow-box, #green-box, #gray-box {
    width: 100px;
    cursor: pointer;
    float: left;
    margin: 0 5px;
    text-align: center;
    padding: 35px 0;
}
#blue-box {
    background-color: blue;
}
#red-box {
    background-color: red;
}
#yellow-box {
    background-color: yellow;
}
#green-box {
    background-color: green;
}
#gray-box {
    background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-area">
    <div class="top-box" id="blue-box"></div>
    <div class="top-box" id="yellow-box"></div>
    <div class="top-box" id="green-box"></div>
</div>
<hr/>
<div id="bottom-area">
    <div class="bottom-box" id="red-box"></div>
    <div class="bottom-box" id="gray-box"></div>
</div>

这基本上删除了将对象切换到底部的侦听器到将对象切换到顶部的侦听器，反之亦然

相关文章：