Los elementos dinámicos no aparecen en IE8 hasta que haga clic con el ratón

Question

Tengo una solicitud de Ajax que arroja resultados de búsqueda, y estoy creando dinámicamente elementos de DOM para mostrar esos resultados. Esto funciona como se esperaba en todos los navegadores que probé excepto IE8.

La solicitud vuelve correctamente, el JavaScript se está ejecutando correctamente y los elementos se están creando, pero los elementos no se muestran en la página. Solo aparecen después de hacer clic con el mouse en algún lugar de la página.

Ejecuté una prueba rápida que ejecutaba el código de devolución de llamada sin la solicitud de Ajax, y se comportó como se esperaba allí. Así que me pregunto si esto tiene algo que ver con la forma en que IE8 está administrando el hilo de devolución de llamada. ¿Alguien más ha visto un comportamiento como este o tiene alguna idea al respecto?

La devolución de llamada es fundamentalmente muy simple. He reproducido con esto:

function catchResults(response) { 
    var contentBlock = document.getElementById('divResults'); 
    var divResults = document.createElement('div'); 
    var txt = document.createTextNode("Results"); 
    divResults.appendChild(txt); 
    contentBlock.appendChild(divResults); 
} 

estoy usando JQuery.ajax para realizar la llamada. He visto el comportamiento correcto en Firefox y Chrome.

¡Gracias por la ayuda!

Answer 1

Me encontré con este problema no hace mucho en IE8.

Creo que esto podría ser un problema con IE8 no volver a representar los elementos en cuestión. Una manera fácil de confirmar esto es agregar una clase al elemento principal y luego eliminarlo. Esto debería provocar que IE8 vuelva a renderizar el elemento.

Si contentBlock es el elemento padre, entonces podría poner a prueba con lo siguiente:

Javascript versión: Versión

// 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); 

sólo hay que poner en fin de la función después de agregar Child. Espero que esto solucione tu problema.

Referencia: http://www.openjs.com/scripts/dom/class_manipulation.php