JQuery：分离和追加后DOM状态不更新

Posted 2023-02-16

【中文标题】JQuery：分离和追加后DOM状态不更新

【英文标题】：JQuery: DOM state not updating after detach and appendTo

【发布时间】：2017-06-14 04:18:41

【问题描述】：

我的目标不是将 div 组填充到一长串元素中，而是在每次点击事件发生时移动该 div。

<div data-target="group1">
   <div id="common-element">Move me</div>
   <div class='list'>List 1</div>
</div>

<div data-target="group2">
   <div class='list'>List 2</div>
</div>    

<div data-target="group3">
   <div class='list'>List 3</div>
</div>

...
...

$(document).on('click', '.list', function()
   $('#common-element').detach().appendTo($(this).parent());
);

现在，一切似乎都正常，因为每次单击任何 .list 元素时 #common-element 都会更改位置。

过了一段时间我不得不这样做：

console.log($('#common-element').parent().data('target'));

问题开始了。 .data('target') 即使在 #common-element 已经移动到另一个组之后也总是返回 group1 。很明显，即使 detach() 和 appendTo() 发生了，#common-element 本身的状态也被留下了。

我的问题是：有没有办法可以更新#common-elements 的状态？

【问题讨论】：

显示的代码有效：jsfiddle.net/7rb8g0gu - 请edit 提供足够的代码来复制问题。顺便说一句，您不需要.detach()，因为.appendTo() 本身会移动元素。

是的，你是对的。我认为问题在于列表是动态创建的元素。

如果组元素是动态创建的，那么可能是您没有更改它们的 id，并且可能是您在多个组上具有相同的 id，因此它为多个组提供相同的 id。

好的，我已经解决了。我还更新了我的问题代码以反映我的实际实现。

【参考方案1】：

不知何故，data() 方法无法跟上动态变化。它的价值不断被抛在后面。因此，不要使用 data()，而是使用旧的 attr('data-x') 方法。

// Not working
console.log($('#common-element').parent().data('target'));

// Working
console.log($('#common-element').parent().attr('data-target'));