При клике переместить блок из одного родителя в другой и обратно?

Question

[Gorila Lopster]

есть такая структура

<div class="published">
	<div class="card">
              .....
            <div class="transfer"></div>
        </div>
	<div class="card">
              .....
            <div class="transfer"></div>
        </div>
</div>
<div class="stock">
	<div class="card">
              .....
            <div class="transfer"></div>
        </div>
	<div class="card">
              .....
            <div class="transfer"></div>
        </div>
</div>

Нужно по клику на блок transfer переместить (вырезать ) блок .card и вставить в блок stock . По повторном клике, вернуть этот элемент опять к родителю published. И так же из блока stock в блок published.
Вот код с который я написал

$(document).ready(function(){

    $(".published transfer").click(function(){
    var elem = $(this).closest('.card');
    $('.stock').append(elem);
    });
    $(".stock transfer").click(function(){
    var elem = $(this).closest('.card');
    $('.published').append(elem);
    });
   });

Написал такой код , определяет кнопку по её родителю и переносит блок к другому родителю.
Блоки card перемещаются из одного к другому родителю , НО ПО ПОВТОРНОМ КЛИКЕ назад не возвращаются!

Answer 1

[Stalker_RED]

При повторном клике они переносятся туда-же, куда уже перенеслись.
Потому что вы как навесили обработчики на кнопки после загрузки страницы, так они там и остаются висеть.

Можно переписать с использованием делегирования событий.

На родительский блок, который никуда не переносится, вешаете обработчик, который проверяет куда именно был клик

$('.stock, .published').on('click', '.transfer', function(){
  let card = this.closest('.card');
  if (card.closest('.stock')) {
    $('.published').append(card);
  } else {
    $('.stock').append(card);
  }
})