javascript - 如何使用 jQuery 访问页面周围有 "moved"的 DOM 元素？

Question

我有一个包含两个区域的页面。每个区域都有盒子。如果用户单击顶部区域的框，它会移动到底部，反之亦然。这适用于第一乐章。理论上，我应该能够根据需要在各个部分之间来回移动它们。

框 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 事件？

请参阅 fiddle : http://jsfiddle.net/r6tw9sgL/

Answer 1

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

如果您将监听器附加到 #top-area 和 #bottom-area，然后使用委托(delegate)事件将点击事件限制为盒子，它应该像你期望的那样工作。参见 .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