Jquery AppendTo bug

Question

我正在使用一些jquery，并发现jquery .appendTo()函数的奇怪行为。

看看这段代码这里。

单击第一列的每一项时，单击的项将追加到第二列。

如果单击items 3和4，一切都将按预期的方式工作:它们将按单击它们的顺序追加。当您单击item 1时，他也将被正确地追加。

问题是当您单击item 2时。此项位于项1中。

这个项目不是附加到div的末尾，他‘是附加在他的老父母的顶部！

看看这些图片：

​

​

现在，我所期待的与我得到的相比：

​

​

如果您再次单击项目2，他将被追加到div的末尾。

这种行为有什么解释吗？实际上是个窃听器？

我怎么才能解决这个问题？

Ps: Jquery 1.10.1

Answer 1

当您单击第2项时，“单击”事件将同时发送给 item 2和 item 1，因为项目2(当“单击”发生时)是项目1的子项。事件会弹出，父项也会得到。

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

裁决：不是一个bug。

您可以更改处理程序以防止这种情况发生：

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