Chrome + jQuery: Div no refrescante?

Question

Tengo este dato de código:

var clickHandler = function(e) { 
    var el = e.target; 
    if(el == $highlightBox[0]) { 
     $highlightBox.hide(); 
     el = document.elementFromPoint(e.clientX, e.clientY); 
     $highlightBox.show(); 
    } 
    $frame.append(getSelector(el) + '<br/>'); 
} 

Al hacer clic en un elemento que añade un poco de texto a $frame (que es sólo un div). El problema es que no se actualiza hasta que lo paso sobre él. ¿Cómo puedo forzar una actualización?

Answer 1

que estaba teniendo un problema similar con Chrome y jQuery donde yo estaba tomando un elemento, poblando su contenido a través de $('#myElem').html(content);

Lo que encontré es que el innerHtml real de la div adecuadamente se actualizaba, pero no estaba la pantalla no refrescante Podría resaltar el texto en el div y ver que lo que estaba viendo originalmente (el viejo texto incorrecto) era en realidad solo un artefacto que todavía estaba en la pantalla, pero el texto que se estaba resaltando era el correcto que se suponía sobrescribiría el original.

La solución más fácil es forzar a la página a actualizar todo el control. Lo hice modificando la apariencia del elemento real.

Aquí es un ejemplo de la revisión que trabajó para mí (utilizando su código):

var clickHandler = function(e) { 
    var el = e.target; 
    if(el == $highlightBox[0]) { 
     $highlightBox.hide(); 
     el = document.elementFromPoint(e.clientX, e.clientY); 
     $highlightBox.show(); 
    } 
    $frame.append(getSelector(el) + '<br/>'); 

    // My Add to force re-rendering of control 
    $frame.height($frame.height() + 1); // re-renders control 
    $frame.height($frame.height() -1); // resets to original height 
} 

Answer 2

Descubrí que a Chrome no le gusta manipular elementos ocultos. Intenta ocultarlo por otros medios (visibilidad, opacidad). es decir,

var clickHandler = function(e) { 
    var el = e.target; 
    if(el == $highlightBox[0]) { 
     $highlightBox.css('opacity', 0); 
     el = document.elementFromPoint(e.clientX, e.clientY); 
     $highlightBox.css('opacity', 1); 
    } 
    $frame.append(getSelector(el) + '<br/>'); 
} 

Sé que esto no es equivalente a bloquear escondite nivel, pero probarlo para ver si es el mismo problema.

Answer 3

muy tarde para la conversación, pero me encontré haciendo un simple desplazamiento página para solucionar el problema de cromo de actualización:

var y = $(window).scrollTop(); 
$(window).scrollTop(y+1); 

Si usted está preocupado por el desplazamiento de 1 píxel, siempre puede desplazarse de nuevo ...

Answer 4

la siguiente línea de este answer trabajó para mí:

$('#parentOfElementToBeRedrawn').hide().show(0);