Chrome + jQuery: Div not refreshing?

I've got this tidbit of code:

var clickHandler = function(e) {
    var el = e.target;
    if(el == $highlightBox[0]) {
        $hi开发者_如何学编程ghlightBox.hide();
        el = document.elementFromPoint(e.clientX, e.clientY);
        $highlightBox.show();
    }
    $frame.append(getSelector(el) + '<br/>');
}

When I click an element it adds some text to $frame (which is just a div). Problem is, it doesn't get refreshed until I mouse over it. How can I force a refresh?

I was having a similar issue with Chrome and jQuery where I was taking an element, populating its content via $('#myElem').html(content);

What I found is that the actual innerHtml of the div was properly being updated, but the screen wasn't refreshing. I could highlight the text in the div and see that what I was originally seeing (the old incorrect text) was actually just an artifact that was still on the screen, but the text that was being highlighted was the correct text that was supposed to overwrite the original.

The easiest fix is to force the page to refresh the entire control. I did this through modifying the appearance of the actual element.

Here is an example of the fix that worked for me (using your code):

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
}

The following line from this answer worked for me:

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

I've found that Chrome doesn't like manipulating hidden elements. Try hiding it by some other means (visibility, opacity). i.e.

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

I know this is not equivalent to block level hiding, but try it to see if it's the same problem.

Very late to the conversation, but I found doing a simple page scroll to fix the chrome refresh issue:

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

If you're worried about the 1 pixel offset, you can always scroll it back...