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

Question

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

$('.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

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

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

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

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> 

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

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

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

IE and old version of Safari/Chrome doesn't support все события для вариантов, в том числе событий щелчка.

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

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

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