На опции нажмите перейти к следующему выбрать

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