Jquery AppendTo bug

Question

我正在使用一些jquery,发现了一个奇怪的jquery .appendTo()函数行为.

在这里查看此代码.

单击第一列的每个项目时,单击的项目将附加到第二列.

如果你点击物品3和4一切工作都按预期:他们会在你点击的顺序被追加.当您单击项目时1,他也将被正确添加.

问题是当你点击项目时2.此项目位于项目内1.

这个项目没有附加到div的末尾,他被附加在他的老父母之上!

看图像:

现在,我期待的与我得到的相比:

如果再次单击项目,2他将附加在div的末尾.

这个行为有一些解释吗？事实上这是一个错误？

我该如何解决这个问题？

Ps:Jquery 1.10.1

Answer 1

当你点击第2项,"单击"事件被发送到这两个项目2 和第1项,因为第2项(当"点击"情况),是第1项的子事件冒泡和家长变得太.

因此,您单击项目2,然后运行事件处理程序.项目2附加到目标.然后事件冒泡到第1项,事件处理程序再次运行.现在,项目1附加在项目2之后,因为(此时)项目2不再是项目1的子项目.

判决:不是错误.

您可以更改处理程序以防止:

$('.item').on('click', function(e){
    // Append clicked item on destiny div
    $(this).appendTo($('.destiny'));
    e.stopPropagation(); // stop the event from bubbling further up
});