Selectivizr使select下拉列表要求在IE8中打开两次单击

Question

我最近在公司内部的一个网站上实现了Selectivizr，因为我们需要支持IE7/8。不幸的是，我们的站点通过jQuery/AJAX加载了很多动态内容。

为了解决这个问题，我重载了Selectivizr函数，让它在执行任何任务后重新加载jQuery。我的代码如下所示：

$(function () {
    if ($('body.ie8, body.ie7, body.comp-view8, body.comp-view7').length > 0) {
        (function () {
            var original = jQuery.fn.ready;
            var getSelectivizr;
            jQuery.fn.ready = function () {
                // Execute the original method.
                original.apply(this, arguments);

                clearTimeout(getSelectivizr);
                getSelectivizr = setTimeout(function () {
                    $.getScript(selectivizr);
                }, 50);
            }

        })();
    }
});

很简单。然而，一位队友最近发现了一个似乎与此相关的bug。在IE8/7中，任何动态加载到页面中的select下拉列表(我不确定静态下拉列表是否已经实现，而这些页面中没有静态下拉列表)需要两次单击才能打开它。

更具体地说，在IE8/7中，第一次单击似乎“聚焦”了下拉列表，而第二次单击则打开了下拉列表。它的兼容性视图，它实际上打开了一秒，然后关闭。第二次点击就可以打开它了(只要你继续关注下拉列表)。

我认为这可能是Selectivizr所做的事情的一个问题，因为它并不真正用于处理动态加载的内容，但是经过一点调试之后，似乎是setTimeout导致了这种奇怪的行为。

我完全不知道如何在不删除Selectivizr实现的情况下修复这个问题。

可能值得注意的是，如果进行了不同的AJAX调用，则必须使用setTimeout来防止浏览器多次加载Selectivizr，因为这会在浏览器中造成严重的性能问题。

注意:这个问题没有准确地反映标题中所述的问题，所以我更新了它以提供更好的搜索！几周后，我又回到了这个问题上，我意识到最初的调试导致我走错了道路。对不起，各位，但我已经给出了一个答案，希望能对此有所帮助！：)

Answer 1

所以，我终于有机会回到这个bug上，似乎这个解决方案一直都在我面前，因为我的最初调试搞砸了，我完全错过了它。

原来这一直是一个选择疗法的问题。不幸的是，对IE8和下面的复选框进行任何类型的动态更改(JS)都会导致重新绘制它，这会迫使它关闭(或者永远不会打开，这取决于版本/模式)。selectivizr的工作方式是，它谨慎地向元素中添加类，例如“slvzr-聚焦”，使用JS来模仿伪类的行为；在本例中是":focus“。

因此，简单地限制selectivizr将这种补丁应用于焦点上的复选框是有意义的。我的解决方案如下所示，尽管它可能并不适用于每个人(或者，您可以简单地确保CSS中不存在“：聚焦”选择器，这将导致selectivizr永远不会触发事件)：

1)在selectivizr.js中找到以下行：

if (!hasPatch(elm, patch)) {

    if (patch.applyClass && (patch.applyClass === true || patch.applyClass(elm) === true)) {

        cssClasses = toggleClass(cssClasses, patch.className, true);
    }

}

2)用以下if语句对其进行包装：

if (!(elm.tagName == 'SELECT' && patch.className == 'slvzr-focus')) {
}

3)当您完成时，块应该是这样的：

if (!(elm.tagName == 'SELECT' && patch.className == 'slvzr-focus')) {
    if (!hasPatch(elm, patch)) {

        if (patch.applyClass && (patch.applyClass === true || patch.applyClass(elm) === true)) {

            cssClasses = toggleClass(cssClasses, patch.className, true);
        }
    }
}

希望这能帮到别人。

谢谢S/O！