Почему этот код jQuery отлично работает в Chrome и Firefox, но не в IE9?

Question

Если я уберу > option, это будет работать, но, очевидно, это не даст желаемый эффект. Я пытался $('.ProductsInCatList option') и $('.ProductsInCatList').find('option') безрезультатно. Любой из которых работает нормально в Firefox и Chrome. Я просто хочу, чтобы код выполнялся при выборе опции из списка Multiselect. Использование JQuery 1.6.4. Обновление: Хорошо, так что, по-видимому, IE9 не работает с событиями нажатия для элемента option, позор, и здесь я подумал, что покончил с кнопками управления для этого

 $('.ProductsInCatList')
        .delegate("option","click", function () {}); //<-- Also does not work

JQuery

$('.ProductsInCatList > option').live("click", function () {
    var option = $(this).clone();

    alert('works');

    var slist = $(this).parent().prev('.SelectedList');
    option.appendTo(slist);
    $(this).detach();
});

HTML

<div id="ListWrapper">
    <div class="CatHeading">Processor</div> 
        <input type="hidden" class="colindex" name="index" value="a1" />
        <input class="ItemCount" name="[a1].ItemCount" type="hidden" value="0" />
        <input class="ListID" name="[a1].ListID" type="hidden" value="1" />

        <select class="SelectedList" multiple="multiple" name="[a1].SelectedList"></select> 

        <select class="ProductsInCatList" id="ProcessorMainList" multiple="multiple" name="ProcessorMainList">
            <option value="6">Intel 2nd Gen Core i7 2600 Socket 1155 Processor </option>
            <option value="8">Intel 2nd Gen Core i5 2500 Socket 1155 Processor</option>
            <option value="44">Intel Core i7-2700 </option>
            <option value="45">Intel Core i5-2400 </option>
            <option value="60">i3-2100T</option>
            <option value="3">Intel Core i7 950 Socket 1366 Processor </option>
            <option value="4">Intel Core i7 930 Socket 1366 Processor </option>
            <option value="37">Intel Xeon X5690</option>
            <option value="38">Intel Xeon X5870</option>
        </select>
    </div>

JSFiddle

Answer 1

IE и старая версия Safari / Chrome не поддерживают все события для параметров, включая события щелчка.

Вероятно, лучший способ - использовать onchange для выбора:

$('body').delegate(".ProductsInCatList", "change", function () {
    var option = $(this).find(":selected")
    ...
});

Единственное отличие состоит в том, что он будет срабатывать только при изменении пользователем выбранного параметра.

Answer 2

Другим способом решения этой проблемы может быть рефакторинг вашего кода. Вы сузили его до селектора - как насчет этого:

$('option.ProductsInCatListOption').live('click', function () {
    var option = $(this).clone();

    alert('works');

    var slist = $(this).parent().prev('.SelectedList');
    option.appendTo(slist);
    $(this).detach();
});

HTML:

    <select class="ProductsInCatList" 
            id="ProcessorMainList" 
            multiple="multiple" 
            name="ProcessorMainList">
        <option value="6" 
                class="ProductsInCatListOption">
          Intel 2nd Gen Core i7 2600 Socket 1155 Processor
        </option>
        <option value="8" 
                class="ProductsInCatListOption">
          Intel 2nd Gen Core i5 2500 Socket 1155 Processor
        </option>
        <!-- etc -->
    </select>

Просто псевдо-пример, но я думаю, что-то вроде этого должно работать.

Также я никогда не использовал live () или делегат (), но вот документы для делегата ():

http://api.jquery.com/delegate/

Надеюсь, это поможет.

UPDATE: другой подход может заключаться в том, чтобы прикрепить событие ко всем элементам и проверить, когда событие запущено, чтобы увидеть, является ли щелчок нужным элементом. Это ужасно, и я не рекомендую вам это делать, но вот как:

$('option').click(function(e){
    if ($(this).parents().filter('.ProductsInCatList').length>0)
    {
        //this click came from an option which is a 
        //child of the select you are interested in
        var minime = $(this).clone();
        alert('boo!');
        $(this).remove();
    }
});

Answer 3

Я всегда считал, что .live () довольно глючный - имелись всевозможные странные ошибки, связанные с областью действия

. При условии .ProductsInCatList присутствует на загрузке страницы, следующее эквивалентно, и по моему опыту большенадежный

$('.ProductsInCatList').delegate("option", "click", function () {
   //
});