如何使用jquery appendTo另一個div ....並且再次返回

Question

當在div1內部單擊一個項目時，它將被追加到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>