Jquery AppendTo 错误

Question

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

看这段代码here.

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

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

问题出在您单击项目 2 时。此项目在项目 1.

内

此项目未附加到 div 的末尾，他'被附加在他的旧 parent 之上！

看图片：

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

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

这种行为有什么解释吗？这实际上是一个错误？

我该如何解决这个问题？

Ps: Jquery 1.10.1

Answer 1

当您单击项目 2 时，"click" 事件将发送到 both 项目 2 和项目 1，因为项目 2（当 "click" 发生时）是项目 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
});

Jquery AppendTo 错误

Jquery AppendTo bug

javascript

jquery

appendto