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 (это просто div). Проблема в том, что он не обновляется, пока я не наведу на него курсор мыши. Как я могу принудительно обновить?

Answer 1

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

Я обнаружил, что фактический innerHtml div правильно обновлялся, но экран не обновлялся. Я мог бы выделить текст в 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

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

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

Answer 3

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

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

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

Answer 4

Я обнаружил, что 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/>');
}

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