Question

如果我带走> option它的作用，但显然这不会产生期望的效果。我试过$('.ProductsInCatList option')和$('.ProductsInCatList').find('option')无济于事。其中任何一个都可以在Firefox和Chrome中。我只想在选择选项时执行代码从多选列表中。使用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 and old version of Safari/Chrome doesn't support选项的所有事件，包括点击事件。

可能最好的方法是使用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（）或delegate（），但这里是delegate（）的文档：

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

为什么这个jQuery代码在Chrome和Firefox中运行良好，而不是IE9？

3 个答案: