javascript - 单击移动选项以进行下一步选择

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

它不起作用，因为您在开始时分配事件，在移动任何东西之前。相反，将事件分配给不会更改的父母，并将其委托给选项。文档

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

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

JSBin