Chrome + jQuery: Div не освежает?

Question

Я получил этот лакомый код:

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

Когда я нажимаю элемент добавляет некоторый текст $frame (который просто дел). Проблема в том, что она не обновляется, пока я не надвигаю ее. Как я могу заставить обновление?

Answer 1

У меня была аналогичная проблема с Chrome и JQuery, где я принимал элемент, заселение его содержимое с помощью $('#myElem').html(content);

То, что я обнаружил, что фактическая innerHtml в DIV был правильно обновляется, но экран WASN Не освежающе. Я мог выделить текст в div и увидеть, что то, что я изначально видел (старый неправильный текст), было фактически всего лишь артефактом, который все еще был на экране, но текст, который был выделен, был правильным текстом, который должен был перезаписать оригинал.

Самое простое исправление - заставить страницу обновить весь элемент управления. Я сделал это, изменив внешний вид фактического элемента.

Вот пример исправления, который работал для меня (с помощью кода):

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

Я обнаружил, что Chrome не любит манипулировать скрытыми элементами. Попробуйте скрыть его другими средствами (видимость, непрозрачность). т.е.

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

Я знаю, что это не эквивалентно блок уровня укрывистости, но попробовать его, чтобы увидеть, если это та же самая проблема.

Answer 3

Очень поздно к разговору, но я нашел, делая простую прокрутку страниц, чтобы решить проблему хрома обновления:

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

Если вы беспокоитесь о 1 пиксель смещения, вы всегда можете прокрутить его обратно ...

Answer 4

следующая строка из этого answer работал для меня:

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