在用戶點擊移動選項，然後選擇

Question

我想繼續前進點擊每個選項下一個選擇，這裏是我目前所擁有的：

<form action="#" method="get"> 
<select multiple name="players" id="players"> 
    <option value="player">player</option> 
    <option value="player1">player1</option> 
    <option value="player2">player2</option> 
</select> 


<select multiple name="team" id="teams"> 
    <option value="team">team</option> 
    <option value="team1">team1</option> 
    <option value="team2">team2</option> 
</select> 

$('#players option').each(function() { 
    $(this).click(function() { 
    $(this).appendTo('#teams'); 
    }); 
}); 

    $('#teams option').each(function() { 
    $(this).click(function() { 
    $(this).appendTo('#players'); 
    }); 
}); 

的問題是什麼時候點擊已經添加的元素，它只是不想移動到「原始」選擇。如何解決它？

演示：http://jsbin.com/ujugej/4/edit

Answer 1

它不工作，因爲你在開始分配事件，事情已經被移動了。相反，將事件分配給不會更改的父母，並將其委派給選項。 Docs

$('#players').on('click', 'option', function() { 
    $(this).appendTo('#teams'); 
}); 

$('#teams').on('click', 'option', function() { 
    $(this).appendTo('#players'); 
}); 

JSBin