JQuery: состояние DOM не обновляется после отсоединения и добавления

Моя цель состоит в том, чтобы вместо заполнения группы 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());
});

Теперь все выглядит нормально, так как #common-element меняет местоположение каждый раз, когда я нажимаю на любой из элементов .list.

Через некоторое время мне пришлось сделать:

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

И начинается проблема. .data('target') всегда возвращает group1 даже после того, как #common-element уже перемещен в другую группу. Очевидно, что несмотря на то, что detach() и appendTo() произошли, состояние самого #common-element осталось позади.

Мой вопрос: есть ли способ обновить состояние #common-elements?


jquery append detach
person Bobo Filipino    schedule 14.06.2017    source источник
comment
Показанный код работает: jsfiddle.net/7rb8g0gu - пожалуйста, отредактируйте вопрос, чтобы предоставить достаточно кода для дублирования проблемы. Кроме того, вам не нужен .detach(), потому что .appendTo() сам по себе будет перемещать элемент.   -  person nnnnnn    schedule 14.06.2017
comment
Да, ты прав. Я думаю, проблема в том, что списки представляют собой динамически создаваемые элементы.   -  person Bobo Filipino    schedule 14.06.2017
comment
Если элементы группы создаются динамически, возможно, вы не меняете их идентификаторы и, возможно, у вас один и тот же идентификатор в нескольких группах, поэтому он дает один и тот же идентификатор для нескольких групп.   -  person Rohan Kumar    schedule 14.06.2017
comment
Хорошо, я решил это. Я также обновил коды по моему вопросу, чтобы отразить мою фактическую реализацию.   -  person Bobo Filipino    schedule 14.06.2017

Ответы (1)


arrow_upward
0
arrow_downward

Каким-то образом метод data() не успевал за динамическими изменениями. Его ценность продолжает отставать. Поэтому вместо использования data() просто используйте старый добрый метод attr('data-x').

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

// Working
console.log($('#common-element').parent().attr('data-target'));
person Bobo Filipino    schedule 14.06.2017