Chrome + jQuery: Div not refreshing?

Question

I've got this tidbit of 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/>');
}

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?

Answer 1

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
}