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

它不起作用，因为您在移动任何内容之前就在开始时分配事件。相反，将事件分配给不会更改的父事件，并将其委托(delegate)给选项。 Docs

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

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

JSBin