jQuery IE7/8 Добавить элементы между списками

Question

Кажется, я не могу найти причину, почему это не должно работать в IE8, поскольку оно отлично работает и как ожидается в других браузерах.

У меня есть 2 окна выбора, заполненные именами сотрудников.

<select id="schedule-add-employees-list" size="7"> 
    <option class="schedule-add-employees-option1" value="jsmith">John Smith</option> 
    <option class="schedule-add-employees-option1" value="jbloggs">Joe Bloggs</option> 
    <option class="schedule-add-employees-option1" value="jdoe">Jane Doe</option> 
</select> 

<select id="schedule-add-employees" size="7"> 
    <option class="schedule-add-employees-option2" value="msmith">Mary Smith</option> 
</select> 

То, что я хочу, чтобы это произошло, и как это работает в Firefox, Chrome и Safari, когда вы нажимаете на одну из опций в первом списке, он удаляется, а затем добавляется ко второму списку и тиски наоборот. JQuery код у меня есть:

$('.schedule-add-employees-option1').click(function() { 
    $(this).appendTo('#schedule-add-employees'); 
    $(this).removeClass('schedule-add-employees-option1'); 
    $(this).addClass('schedule-add-employees-option2'); 
}) 
$('.schedule-add-employees-option2').click(function() { 
    $(this).appendTo('#schedule-add-employees-list'); 
    $(this).removeClass('schedule-add-employees-option2'); 
    $(this).addClass('schedule-add-employees-option1'); 
}) 

Есть ли конкретная причина этого не работает в IE8, как это происходит в других браузерах?

У меня есть правильная декламация doctype, поэтому нет возможности режима quircks. Перешли много других хорошо документированных исправлений IE7/8, и ни один из них не работает для этого конкретного экземпляра. Кажется, что это не ошибка, просто не отвечает. Ничего не делает, когда вы нажимаете опцию в любом окне выбора.

Любая помощь была бы очень признательна!

Answer 1

Как сообщил Adeneo в комментариях к вопросу, проблема заключается в том, что событие click не отвечает ожидаемым в IE7 и IE8 и, вероятно, ненадежным в новых браузерах, судя по связанной информации.

Здесь был обходным путем, который я применил:

$('#schedule-add-employees').change(function() { 
    var obj = $('#schedule-add-employees option:selected'); 
    obj.appendTo('#schedule-add-employees-list'); 
}); 
$('#schedule-add-employees-list').change(function() { 
    var obj = $('#schedule-add-employees-list option:selected'); 
    obj.appendTo('#schedule-add-employees'); 
});