为什么此jQuery代码在Chrome和Firefox中能正常工作，而在IE9上却不能工作？

Question

如果我不使用> option则可以使用，但是显然不能达到预期的效果。 我试过$('.ProductsInCatList option')和$('.ProductsInCatList').find('option')无济于事。 两者都可以在Firefox和Chrome中正常运行。 我只希望从Multiselect列表中选择选项时执行代码。 使用JQuery 1.6.4。 更新：好的，显然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

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/

希望这可以帮助。

更新：另一种方法可能是将事件附加到所有元素，并测试触发该事件的时间，以查看单击是否针对所需元素。 这太可怕了，我不建议您这样做，但是方法如下：

$('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 () {
   //
});