jquery .data 在 remove() 和 append() 后丢失答案

【问题标题】：jquery .data lost after remove() and append()jquery .data 在 remove() 和 append() 后丢失
【发布时间】：2014-09-27 01:46:05
【问题描述】：

抱歉，这似乎是一个愚蠢的问题……但这实际上是预期的行为吗？

我将数据存储在某个元素上：

$('#source-list li.active').data('relation-text', textEditor.value());

稍后元素从一个列表移动到另一个列表：

$('#source-list li.active').remove().appendTo('#target-list')

就在 'remove()' 'data()' 返回预期值之前。 remove()之后，数据就没了。

我知道如何解决这个问题...但我觉得这很奇怪 - 这是预期的行为吗？

【问题讨论】：

当然，您从 DOM 中完全删除了该元素。与之相关的数据自然会被删除。如果你想保留数据，只需隐藏元素而不是直接删除它。
是的，这是设计使然。如果您打算重新附加元素并希望同时保留其关联数据，请使用 detach() 而不是 remove()。（请注意，在您的特定情况下，您甚至不必删除元素 - 只需调用 append()，它会将元素移动到其新容器下而不克隆它）。
非常感谢 Frédéric，这就是答案 - 使用 .detach() 和 .appendTo() 数据不会丢失。只有 '.appendTo()' （没有前面的 '.remove()' 数据仍然会丢失。但是 '.detach().appendTo()' 有效 :) 再次感谢！

【解决方案1】：

我想，所以，从Jquery Documentation来看：

.data() 方法允许我们以一种安全的方式将任何类型的数据附加到 DOM 元素，从而避免循环引用，从而避免内存泄漏。

所以，即使你仍然可以引用它，因为 DOM 元素已被移除，与之关联的数据也已被移除。

【讨论】：

【解决方案2】：

你可以根据JQuery使用.detach()：

.detach() 方法与 .remove() 方法相同，不同之处在于 .detach() 保留了与已删除元素关联的所有 jQuery 数据。当移除的元素稍后要重新插入 DOM 时，此方法非常有用。

var div = $("div").detach();

$(div).appendTo("body");

【讨论】：