Chrome + jQuery：Div 不刷新？

Posted 2023-02-21

【中文标题】Chrome + jQuery：Div 不刷新？

【英文标题】：Chrome + jQuery: Div not refreshing?

【发布时间】：2011-06-14 05:36:36

【问题描述】：

我有这段代码：

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）。问题是，直到我将鼠标悬停在它上面才会刷新。如何强制刷新？

【问题讨论】：

一个 jsfiddle 测试用例可能会有用。

@ThiefMaster：真的很难在 jsfiddle 中复制……它已经融入了 chrome 扩展。

【参考方案1】：

answer 中的以下行对我有用：

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

【参考方案2】：

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

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

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

【参考方案3】：

我在使用 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

【讨论】：

酷。这听起来像是我遇到的问题..打算接受这个。

【参考方案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/>');

我知道这不等同于块级隐藏，但试试看是不是同样的问题。

【讨论】：

$frame 没有被刷新。最后一行代码有问题。 $frame 永远不会被隐藏，所以...我认为这不是问题所在。

是的，但是您在隐藏 $highlightBox 之后分配了 el。你试过 console.log(el) 吗？