javascript - 如何使用jquery追加到另一个div ....然后再返回

Question

当在 div1 内单击某个项目时，它将 append 到 div2 的内部。 (这确实很好用!)但是我然后单击 div2 内的项目(希望它会返回到 div1)但没有任何反应。任何想法都非常受欢迎。 dom没有更新吗？我的选择器正确吗？

<div id="div1">
<div class="items">Audi</div>
<div class="items">Jeep</div>
<div class="items">Mini</div>
</div>

<div id="div2"></div>

$('#div1 .items').click(function(){
    $(this).appendTo("#div2");
});


$('#div2 .items').click(function(){
    $(this).appendTo("#div1");
});

Answer 1

试试这个。

$(document).ready(function(){
  
 $(function(){
   $("#div1").on("click", ".items", function(){
     $("#div2").append($(this));
   });
  });
  
  $(function(){
   $("#div2").on("click", ".items", function(){
     $("#div1").append($(this));
   });
  });
});

div{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<div id="div1">
  <h2>Div 1</h2>
  <div class="items">Audi</div>
  <div class="items">Jeep</div>
  <div class="items">Mini</div>
</div>

<div id="div2">
  <h2>Div 2</h2>
</div>