Selectivizr powoduje, że rozwijane menu wyboru wymaga dwóch kliknięć do otwarcia w IE8 i poniżej

Question

Niedawno zaimplementowałem Selectivizr na wewnętrznej stronie firmy, ponieważ potrzebujemy wsparcia dla IE7/8. Niestety, nasza strona dynamicznie ładuje zawartość za pośrednictwem jQuery/AJAX.

Aby rozwiązać ten problem, przeładowałem funkcję gotową do użycia jQuery, aby ponownie załadować Selectivizr po wykonaniu jakiegokolwiek zadania, do którego zostało ustawione. Mój kod wygląda następująco:

$(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); 
      } 

     })(); 
    } 
}); 

Wystarczająco proste. Jednak członek zespołu niedawno odkrył błąd, który wydaje się być powiązany. W IE8/7 dowolne menu rozwijane, które jest dynamicznie ładowane na stronę (nie jestem pewien, czy listy rozwijane są statyczne, a żadna z tych stron ich nie ma), wymaga dwóch kliknięć, aby je otworzyć.

Mówiąc dokładniej, w IE8/7 pierwsze kliknięcie wydaje się "skupiać" na liście rozwijanej, a drugie otwiera. To widok zgodności, to faktycznie otwiera się na ułamek sekundy, a następnie zamyka. Drugie kliknięcie otwiera je dobrze (o ile pozostajesz skupiony na rozwijanym menu).

Założono, że może to być problem z działaniem Selectivizr, ponieważ nie został zaprojektowany do pracy z dynamicznie ładowanymi treściami, ale po odrobinie debugowania wygląda na to, że to setTimeout powoduje to dziwne zachowanie.

Mam całkowitą stratę jak to zrobić naprawić to bez usuwania mojej implementacji Selectivizr.

Warto zauważyć, że setTimeout jest konieczne, aby przeglądarka nie próbowała załadować Selectivizr wiele razy, jeśli wykonywane są różne wywołania AJAX, ponieważ może to spowodować poważne problemy z wydajnością w przeglądarce.

Uwaga: to pytanie nie odzwierciedla dokładnie problemu określonego w tytule, więc zaktualizowałem go, aby zapewnić lepsze wyszukiwanie! Po kilku tygodniach powracających do tego problemu zauważyłem, że moje wstępne debugowanie doprowadziło mnie na złą drogę. Przepraszam, ale mam na to odpowiedź, która, mam nadzieję, pomoże! :)

Answer 1

Tak, w końcu miałem szansę wrócić do tego błędu i wygląda na to, że rozwiązaniem było wpatrywanie się w twarzy przez cały czas, właśnie całkowicie przegapiłem to ze względu na spapranie mojego początkowego debugowania.

Okazuje się, że cały czas był to problem selekcji. Niestety, dokonanie jakiejkolwiek zmiany dynamicznie (JS) w polu wyboru w IE8 i poniżej powoduje jego przerysowanie, co zmusza do zamknięcia (lub nigdy nie otwiera się, w zależności od wersji/trybu). Metoda selectivizr polega na tym, że dyskretnie dodaje klasę do elementów, takich jak "slvzr-focus", używając JS do naśladowania zachowania pseudoklas; w tym przypadku ": focus".

Jako takie, po prostu ograniczyć wybór od tej łaty do wybranych pól na fokusie. Moje rozwiązanie jest następujące, chociaż może nie być dla wszystkich (alternatywnie, możesz po prostu upewnić się, że w twoim CSS nie ma selektorów ": focus", co spowoduje, że selektivizr nigdy nie wyśle ​​zdarzenia):

1) Znajdź następujący wiersz w selectivizr.JS:

if (!hasPatch(elm, patch)) { 

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

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

} 

2) owinąć go z następujących jeśli stwierdzenie:

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

3) Blok powinien wyglądać następująco kiedy skończysz:

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); 
     } 
    } 
} 

Mam nadzieję, że h wyskoczy tam ktoś.

Dzięki za S/O!