6

最近、IE7 / 8をサポートする必要があるため、社内のWebサイトにSelectivizrを実装しました。残念ながら、私たちのサイトはjQuery/AJAXを介して多くの動的コンテンツの読み込みを行っています。

この問題を解決するために、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);
            }

        })();
    }
});

十分に単純です。しかし、最近、チームメートが関連していると思われるバグを発見しました。IE8 / 7では、ページに動的にロードされる選択ドロップダウン（静的ドロップダウンが有効になっているかどうかはわかりませんが、これらのページに静的ドロップダウンがないかどうかはわかりません）では、2回クリックして開く必要があります。

具体的には、IE8 / 7では、最初のクリックでドロップダウンに「フォーカス」されているように見え、2回目のクリックでドロップダウンが開きます。互換表示です。実際には一瞬開いてから閉じます。2回目のクリックで問題なく開きます（ドロップダウンに集中している限り）。

Selectivizrは動的にロードされたコンテンツで動作するように設計されていないため、これが問題である可能性があると想定していましたが、少しデバッグした後、この奇妙な動作を引き起こしているのはsetTimeoutのようです。

Selectivizrの実装を削除せずにこれを修正する方法がまったくわかりません。

異なるAJAX呼び出しが行われた場合に、ブラウザーがSelectivizrを複数回ロードしようとするのを防ぐために、setTimeoutが必要であることに注意してください。これにより、ブラウザー内で重大なパフォーマンスの問題が発生する可能性があります。

注：この質問は、タイトルに記載されている問題を正確に反映していないため、検索を改善するために更新しました。数週間後にこの問題に戻った後、最初のデバッグが私を間違った道に導いたことに気づきました。申し訳ありませんが、私はこれに対する答えを提供しました。これがお役に立てば幸いです！:)

4

1 に答える 1

3

それで、私はついにこのバグに戻る機会がありました、そして解決策はずっと私を正面から見つめていたようです、私は私の最初のデバッグを失敗させたのでちょうどそれを完全に逃しました。

それはずっとselectivizrの問題だったことがわかりました。残念ながら、IE8以下の選択ボックスに動的に（JS）何らかの変更を加えると、再描画され、強制的に閉じられます（または、バージョン/モードによっては開かれません）。selectivizrが機能する方法は、JSを使用して疑似クラスの動作を模倣し、「slvzr-focus」などの要素にクラスを個別に追加することです。この場合は「：focus」です。

そのため、selectivizrがこの種のパッチを適用してフォーカスのあるボックスを選択することを単純に制限することは理にかなっています。私の解決策は次のとおりですが、すべての人に適しているわけではありません（または、CSSに「：focus」セレクターが存在しないことを確認できます。これにより、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！

于 2012-10-17T12:19:28.623 に答える