Динамические элементы не появляются в IE8 до тех пор, пока не будет нажата кнопка мыши

Question

У меня есть запрос Ajax, который возвращает результаты поиска, и я динамически создаю элементы DOM для отображения этих результатов.Это работает, как и ожидалось, во всех браузерах, которые я тестировал, кроме IE8.

Запрос возвращается нормально, JavaScript успешно выполняется, и элементы создаются, но элементы не отображаются встраница.Они появляются только после щелчка мышью где-то на странице.

Я провел быстрый тест, который запустил код обратного вызова без запроса Ajax, и он вел себя там, как ожидалось.Поэтому мне интересно, связано ли это с тем, как IE8 управляет потоком обратного вызова.Кто-нибудь еще видел подобное поведение или имел представление о нем?

Обратный вызов в принципе очень прост.Я воспроизвел с этим:

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

Я использую JQuery.ajax, чтобы сделать звонок.Я видел правильное поведение в FireFox и Chrome.

Спасибо за помощь!

Answer 1

Я столкнулся с этой проблемой не так давно на IE8.

Я думаю, что это может быть проблема с IE8, который не рендерит рассматриваемые элементы.Простой способ подтвердить это - добавить класс в родительский элемент, а затем удалить его.Это должно запустить IE8 для повторной визуализации элемента.

Если contentBlock является родительским элементом, вы можете проверить следующее:

Версия Javascript:

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

Просто поместите его в конец функции после добавления appendChild.Надеюсь, это должно исправить вашу проблему.

Ссылка: http://www.openjs.com/scripts/dom/class_manipulation.php