Selectivizr 导致选择下拉列表需要单击两次才能在 IE8 及更低版本中打开

Question

我最近在公司内部网站上实现了Selectivizr，因为我们需要支持IE7/8。不幸的是，我们的网站通过jQuery/AAJAX进行了大量的动态内容加载。

为了解决这个问题，我重载了jQuery ready函数，以便在Selectivizr执行任何任务后重新加载它

$(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中，任何动态加载到页面中的选择下拉列表(我不确定静态下拉列表是否有效，因为这些页面都没有)，都需要点击两次才能打开。

更具体地说，在IE8/7中，第一次点击似乎"聚焦"在下拉列表上，而第二次点击会打开它。在兼容性视图中，它实际上会打开一瞬间，然后关闭。第二次点击会很好地打开它(只要你保持专注于下拉列表)。

我曾认为Selectivizr的工作可能有问题，因为它并不是真正为处理动态加载的内容而设计的，但经过一点调试，似乎是setTimeout导致了这种奇怪的行为。

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

可能值得注意的是，如果进行不同的AJAX调用，setTimeout对于防止浏览器多次尝试加载Selectivizr是必要的，因为这可能会在浏览器中导致严重的性能问题。

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

Answer 1

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

事实证明，这一直是一个选择性的问题。不幸的是，在IE8及以下版本中，对选择框进行任何形式的动态更改(JS)都会导致它被重新绘制，从而迫使它关闭(或永远不打开，具体取决于版本/模式)。selectivizr的工作方式是将类离散地添加到元素中，例如"slvzr-focus"，使用JS来模拟伪类的行为；在本例中为"：焦点"。

因此，简单地限制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 (!(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！