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);填充其内容

我发现div的实际innerHtml正在更新，但屏幕并不令人耳目一新。我可以突出显示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

此answer的以下行为我工作：

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

Answer 3

我发现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 4

对话很晚，但我发现做一个简单的页面滚动来修复chrome刷新问题：

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

如果您担心1像素偏移，您可以随时将其向后滚动...

Chrome + jQuery：Div不爽快？

4 个答案: