Javascript jQuery-使用appendTo移动元素时工作不正常

我想通过点击事件将一些h3标签从顶部div移动到底部div，并移动到相反的。
一切正常，直到我单击最近移动的元素以查看相反的操作

例如，我单击项目1。它会转到底部div。再次单击项目1，它不工作。为什么?

$（“文档”）.ready（函数（）{
$（“div#top h3”）。单击（函数（e）{
$（e.target.tagName+“#”+e.target.id）.detach（）.appendTo（“div#down”）；
});
$（“div#down h3”）。单击（函数（e）{
$（e.target.tagName+“#”+e.target.id）.detach（）.appendTo（“div#top”）；
});
});

顶部
项目1
项目2
项目3
向下
项目4
项目5
项目6
由于希望基于元素的位置具有动态行为，因此需要使用

演示：
由于您希望基于元素的位置具有动态行为，因此需要使用

演示：
您需要告诉它确定H3在哪里，然后相应地移动

$("document").ready(function() {
 $("div > h3").click(function(e){
  if($(this).parent().attr('id') == 'top')
   $(e.target.tagName+"#"+e.target.id).detach().appendTo("div#down");
  else
   $(e.target.tagName+"#"+e.target.id).detach().appendTo("div#top");
 });
});

这里有一个。
您需要告诉它，以确定H3在哪里，并相应地移动

$("document").ready(function() {
 $("div > h3").click(function(e){
  if($(this).parent().attr('id') == 'top')
   $(e.target.tagName+"#"+e.target.id).detach().appendTo("div#down");
  else
   $(e.target.tagName+"#"+e.target.id).detach().appendTo("div#top");
 });
});

这里有一个。
您的代码将
单击
功能应用于当前匹配元素集（在文档准备就绪时）。单击
#top
中的元素会起作用，因为它已连接事件侦听器。然后将其移动到
#down
，但单击功能仍然保留-在后续单击时，它将被重新附加到
#down
。在中，单击顶部的项目1，然后单击项目2。他们将被移到楼下。然后单击项目1，并查看它是否附加到下拉列表的末尾。再次单击项目2，并看到相同的内容。使用
.on（）
的事件委派允许您使用“实时”选择器。您的代码将
单击功能应用于当前匹配元素集（文档就绪时）。单击
#top
中的元素会起作用，因为它已连接事件侦听器。然后将其移动到
#down
，但单击功能仍然保留-在后续单击时，它将被重新附加到
#down
。在中，单击顶部的项目1，然后单击项目2。他们将被移到楼下。然后单击项目1，并查看它是否附加到下拉列表的末尾。再次单击项目2，并看到相同的内容。使用
.on（）
的事件委派允许您使用“实时”选择器。虽然这确实有效，但充其量只是一种间接解决方案。看看ArunPJohny的答案，虽然这确实有效，但充其量只是一个间接的解决方案。看看ArunPJohny的答案