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

谢谢您的帮助!


5801
2017-07-28 06:36


起源



答案:


不久前我在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


14
2017-07-28 06:47



我遇到了类似问题的答案 - 元素没有显示。如果我在开发人员工具窗口中更改了它的任何属性,它就会出现。这种技术解决了这个问题。 - Diodeus - James MacFarlane
罗斯科,你是个天才。这就像一个魅力。你知道这个问题的任何文件吗?是打算吗?谢谢你的帮助! - TwainJ
很高兴听到它=)。我不记得我在哪里看到这个bug记录对不起。我很确定这不是预期的行为。 - Ross
谢谢!你回答真的帮到了我! - Ivan Krechetov
对长期存在的问题给出了很好的答案。谢谢! - Spencer


答案:


不久前我在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


14
2017-07-28 06:47



我遇到了类似问题的答案 - 元素没有显示。如果我在开发人员工具窗口中更改了它的任何属性,它就会出现。这种技术解决了这个问题。 - Diodeus - James MacFarlane
罗斯科,你是个天才。这就像一个魅力。你知道这个问题的任何文件吗?是打算吗?谢谢你的帮助! - TwainJ
很高兴听到它=)。我不记得我在哪里看到这个bug记录对不起。我很确定这不是预期的行为。 - Ross
谢谢!你回答真的帮到了我! - Ivan Krechetov
对长期存在的问题给出了很好的答案。谢谢! - Spencer