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

【问题标题】：Jquery click event inside each loop not working in IE每个循环内的Jquery单击事件在IE中不起作用
【发布时间】：2011-10-12 17:03:07
【问题描述】：

我继承了这段代码，我正在努力让它工作。它正在生成一个用于过滤产品页面的选择菜单。最初，它正在生成一个 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 的解决方法，并为虚拟设计师（就是我）保持简单。 Is there a workaround to trigger an option.click event in IE?

【问题讨论】：

标签： jquery internet-explorer click each

【解决方案1】：

试试这个

$.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>');

        });

【讨论】：

不幸的是，这只是使得选项不会在 IE 中生成。不过谢谢！

【解决方案2】：

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

我在新闻组中发现了这个。

我们不能使用原生事件来点击 IE 中的元素。 IE 总是报告选项元素的高度和宽度为 0，所以有无法计算点击点应该在哪里。

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

【讨论】：

是的，我已经弄清楚了那部分，IE 就是不明白这一点。我希望有一个 jQuery 解决方案，至少可以通过某种方式触发选择事件，但看来我必须尝试另一种方法。