除非单击鼠标，否则动态元素不会出现在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