在鼠标单击之前，动态元素不会出现在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中看到了正确的行为。

谢谢您的帮助！

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