我有一个包含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/
最佳答案
您的代码会将页面加载时的事件附加到与选择器匹配的元素上。
如果将侦听器附加到#top-area
和#bottom-area
,然后使用委托事件将click事件限制在框内,则它应该可以按预期运行。有关更多信息,请参见.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
关于javascript - 如何使用我在页面中“移动”的jQuery访问DOM元素?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32341641/