如何使用我在页面中“移动”的jQuery访问DOM元素？

Question

我有一个包含2个区域的页面。 每个区域都有箱子。 如果用户单击顶部区域中的框，则该框将移至底部，反之亦然。 这对于第一乐章效果很好。 从理论上讲，我应该可以随意在各节之间来回移动它们。

框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/

Answer 1

您的代码连接到选择合适的匹配，那么这些元素在页面加载的事件。

如果将侦听器附加到#top-area和#bottom-area ，然后使用委托事件将click事件限制在框内，则它应该可以按预期运行。 有关更多信息，请参见.on：直接事件和委派事件 。

使用以下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

Answer 2

这是您可以使用的另一种方法：

 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> 

基本上，这会将将对象切换到底部的侦听器移到将对象切换到顶部的侦听器，反之亦然。