JQuery: DOM 分离和追加后状态未更新

Question

我的目标不是将 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') 总是 returns group1 即使在 #common-element 已经移动到另一个组之后。很明显，即使发生了 detach() 和 appendTo()，#common-element 本身的状态也被留下了。

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

Answer 1

data() 方法不知何故跟不上动态变化。它的价值不断落后。所以不要使用 data()，只需使用旧的 attr('data-x') 方法即可。

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

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

JQuery: DOM 分离和追加后状态未更新

JQuery: DOM state not updating after detach and appendTo

jquery

append

detach