每个循环内的 Jquery 单击事件在 IE 中不起作用

Question

我继承了这段代码，并试图让它工作。它生成一个选择菜单，用于过滤产品页面。最初，它生成 UL（选项是 LI），但现在正在转换为选择列表。这些选项在所有浏览器中都完美显示，并且在除 IE（所有版本）之外的每个浏览器中单击效果都很好。在 IE 中，我可以使用下拉菜单，但是当我单击选项时没有任何反应。

我尝试更改事件以进行更改和选择，但这似乎只会破坏一切。

预先感谢您的任何帮助！

$.each(hazardClassification, function (i) {
                cleanMenuforClass = hazardClassification[i].toLowerCase().replace(/ /g, '_').replace(/&./g, '_').replace(/\,/g, '').replace('/', '').replace('.', '');


                $("<option/>", {
                    "class": cleanMenuforClass,
                    click: function (event) {
                        $("#legend-inline-search").val("");
                            $("#pipemarker-type-selection div.product-container").css('display', '');
                        var clickedInput = $(this).attr("class");
                        var clickedCheckbox = $(this);
                        if ($(this).is(":selected")) {
                                filterItems(hazardClassification[i], clickedInput, countItems, selectedItemsContainer, clickedCheckbox);

                            } else {
                                removeFilter(hazardClassification[i], clickedInput, countItems, selectedItemsContainer);
                            }

                    }
                }).appendTo("#filter-by-classification select").append('<span>' + hazardClassification[i] + '"<span>');

        });

更新：找到了一个仍然使用 jQuery 的解决方法，并且让虚拟设计师（就是我）的事情变得简单。 是否有解决方法来触发选项.IE 中的 click 事件？

Answer 1

我认为这是IE的问题。 IE 选择（当涉及选项时）总是有不奇怪的行为。

我在新闻组中找到了这个。

我们无法使用本机事件来单击 IE 中的元素。 IE
选项元素的高度和宽度始终报告为 0，因此有
无法计算点击点应该在哪里。

所以我认为你必须使用 javascript 解决方法而不是使用 jquery“click”事件

Answer 2

试试这个

$.each(hazardClassification, function (i) {
                cleanMenuforClass = hazardClassification[i].toLowerCase().replace(/ /g, '_').replace(/&./g, '_').replace(/\,/g, '').replace('/', '').replace('.', '');


                $("option", {
                    "class": cleanMenuforClass,
                    click: function (event) {
                        $("#legend-inline-search").val("");
                            $("#pipemarker-type-selection div.product-container").css('display', '');
                        var clickedInput = $(this).attr("class");
                        var clickedCheckbox = $(this);
                        if ($(this).is(":selected")) {
                                filterItems(hazardClassification[i], clickedInput, countItems, selectedItemsContainer, clickedCheckbox);

                            } else {
                                removeFilter(hazardClassification[i], clickedInput, countItems, selectedItemsContainer);
                            }

                    }
                }).appendTo("#filter-by-classification select").append('<span>' + hazardClassification[i] + '"<span>');

        });