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'));

问题就出现了。即使在#common-element已经移动到另一个组之后，.data（'target'）也始终返回group1。很明显，即使detach（）和appendTo（）发生了，＃common-element本身的状态也被遗忘了。

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

Answer 1

不知何故，data（）方法无法跟上动态变化。它的价值一直落后。因此，不要使用data（），只需使用旧的attr（＆＃39; data-x＆＃39;）方法。

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

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

JQuery：分离后附加到DOM的状态不会更新并{appendTo

1 个答案: