动态元素没有出现在IE8，直到有一个鼠标点击 [英] Dynamic Elements are not appearing in IE8 until there is a mouse click

问题描述

我有一个Ajax请求返回的搜索结果，而我动态创建的DOM元素来显示这些结果。这正按预期在所有除IE8的，我测试的浏览器。

I have an Ajax request that returns search results, and I am dynamically creating DOM elements to display those results. This is working as expected in all the browsers I've tested except for IE8.

请求被返回的细时，JavaScript成功运行，并且正在创建的元素，但是元素不被显示在页面。他们只出现后，鼠标单击页面上的某个地方。

The request is returning fine, the JavaScript is running successfully, and the elements are being created, but the elements are not being displayed in the page. They only appear after a mouse-click somewhere on the page.

我跑快速测试跑回调code，而不Ajax请求，并表现为预期的存在。所以，我想知道，如果这事做的方式IE8是管理回调线程。有其他人看到的行为是这样，还是有它的洞察力？

I ran a quick test that ran the callback code without the Ajax request, and it behaved as expected there. So I'm wondering if this has something to do with the way IE8 is managing the callback thread. Has anyone else seen behavior like this, or have insight on it?

回调基本上是很简单的。我纷纷转载这一点：

The callback is fundamentally very simple. I have reproduced with this:

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的正当行为。

I am using JQuery.ajax to make the call. I have seen the proper behavior in FireFox and Chrome.

感谢您的帮助！

推荐答案

我不久前就遇到了这个问题，在IE8。

I ran into this problem not so long ago on IE8.

我想这可能是与IE8不重新呈现所讨论的内容有问题。 一个简单的方法来确认，这是一类添加到父元素，然后将其删除。这应该引起IE8重新呈现的元素。

I think this might be a problem with IE8 not re-rendering the elements in question. An easy way to confirm this is to add a class to the parent element and then remove it. This should trigger IE8 to re-render the element.

如果内文是父元素，那么你可以用下面的测试：

If contentBlock is the parent element then you could test with the following:

的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。这应该可以解决您的问题。

Just put it at end of the function after you appendChild. Hopefully this should fix your issue.

参考：<一href="http://www.openjs.com/scripts/dom/class_manipulation.php">http://www.openjs.com/scripts/dom/class_manipulation.php

这篇关于动态元素没有出现在IE8，直到有一个鼠标点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！