Jquery AppendTo 错误

Question

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

看看这个代码here。

当您单击第一列的每个项目时，单击的项目将附加到第二列。

如果您单击项目3 和4，一切都会按预期进行：它们将按照您单击它们的顺序附加。 当您单击项目1 时，他也会正确附加。

问题是当您单击项目2 时。此项目在项目1 内。

此项目没有附加到 div 的末尾，他'附加在他的旧父母之上！

看图片：

现在，我的期望与我得到的：

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

这种行为有什么解释吗？其实是bug？

我该如何解决这个问题？

ps：jquery1.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
});