Elementy dynamiczne nie pojawiają się w IE8, dopóki nie zostanie kliknięte myszką.

Question

Mam żądanie Ajax, które zwraca wyniki wyszukiwania, i dynamicznie tworzę elementy DOM, aby wyświetlić te wyniki. Działa to zgodnie z oczekiwaniami we wszystkich przeglądanych przeze mnie przeglądarkach z wyjątkiem IE8.

Żądanie jest zwracane poprawnie, JavaScript działa poprawnie, a elementy są tworzone, ale elementy nie są wyświetlane na stronie. Pojawiają się one tylko po kliknięciu myszą gdzieś na stronie.

Uruchomiłem szybki test, który uruchomił kod zwrotny bez żądania Ajax, i zachowywał się zgodnie z oczekiwaniami. Zastanawiam się więc, czy ma to coś wspólnego ze sposobem, w jaki IE8 zarządza wątkiem wywołania zwrotnego. Czy ktokolwiek widział takie zachowanie lub miał wgląd w to?

Oddzwanianie jest zasadniczo bardzo proste. Odtworzyłem to:

function catchResults(response) { 
    var contentBlock = document.getElementById('divResults'); 
    var divResults = document.createElement('div'); 
    var txt = document.createTextNode("Results"); 
    divResults.appendChild(txt); 
    contentBlock.appendChild(divResults); 
} 

Używam JQuery.ajax do wykonania połączenia. Widziałem prawidłowe zachowanie w FireFox i Chrome.

Dzięki za pomoc!

Answer 1

Wpadłem na ten problem nie tak dawno temu na IE8.

Myślę, że to może być problem z IE8, który nie renderuje ponownie tych elementów. Łatwym sposobem potwierdzenia tego jest dodanie klasy do elementu nadrzędnego, a następnie jej usunięcie. To powinno spowodować, że IE8 ponownie wyrenderuje element.

Jeśli contentBlock jest elementem dominującym następnie można przetestować z poniższym:

Javascript wersji: Wersja

// Variable storing the test class name 
var testClass = "testClass"; 
// Add test class to element 
contentBlock.className += " "+testClass; 
// Remove test class from element 
var reg = new RegExp('(\\s|^)'+testClass+'(\\s|$)'); 
contentBlock.className=contentBlock.className.replace(reg,' '); 

jQuery:

// Variable storing the test class name 
var testClass = "testClass"; 
// Add test class to element and then remove it 
$('#divResults').addClass(testClass).removeClass(testClass); 

Wystarczy umieścić go w koniec funkcji po dodaniuChild. Mam nadzieję, że to powinno rozwiązać twój problem.

referencyjny: http://www.openjs.com/scripts/dom/class_manipulation.php