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

У меня есть запрос 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.

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

Ответы

Ответ 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);

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

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