My goal is rather than populating a div group to a long list of elements is to move that div instead every time a click event happens.
<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());
});
Now, everything seems OK as #common-element changes location every time I click any of the .list elements.
After some time I had to do:
console.log($('#common-element').parent().data('target'));
And the problem starts. .data('target') always returns group1 even after #common-element was already moved to another group. It's apparent that even though the detach() and appendTo() happened, the state of #common-element itself was left behind.
My question is: Is there a way that I can update the state of #common-elements?
Somehow the data() method couldn't keep up with dynamic changes. Its value keeps getting left behind. So instead of using data(), just use the good old attr('data-x') method.
// Not working
console.log($('#common-element').parent().data('target'));
// Working
console.log($('#common-element').parent().attr('data-target'));